Callback Hell คืออะไร
ในภาษา JavaScript เมื่อฟังก์ชั่นแรกทำงานเสร็จแล้ว จะต้องมีการเรียกใช้ฟังก์ชั่นถัดไป ซึ่งหากมีฟังก์ชั่นต้องถูกเรียกใช้ต่อเนื่องกันหลายๆชั้น จะทำให้เกิด Callback Hell ซึ่งส่งผลให้โค้ดดูยุ่งเหยิง ซับซ้อน ดังตัวอย่าง
getUser(userId, function(user) {
getPosts(user.id, function(posts) {
getComments(posts[0].id, function(comments) {
// ดำเนินการกับ comments ที่ได้รับมา
});
});
});จากตัวอย่าง เมื่อเรียกใช้ฟังก์ชั่น getUser แล้ว จะต้องเรียกใช้ฟังก์ชั่น getPosts เพื่อดึงข้อมูลโพสต์ของผู้ใช้เป็นลำดับต่อไป และหลังจากนั้นยังต้องเรียกใช้ฟังก์ชั่น getComments เพื่อดึงข้อมูลคอมเมนต์ของโพสต์ที่ได้รับมาอีก การเรียกฟังก์ชั่นซ้อนๆกันต่อเนื่องนี่เองที่ถูกเรียกว่า Callback Hell เพราะมันทำให้โค้ดยุ่งเหยิง ยากต่อการทำความเข้าใจรวมถึงยากต่อการแก้ไขในอนาคต ดัง "นรก" นั่นเอง
การปรับปรุงโค้ดเพื่อหลีกเลี่ยง Callback Hell สามารถทำได้หลายวิธี เช่น
1. ใช้ Promises ซึ่ง Promises จะช่วยลดจำนวนของ callback function ที่ต้องใช้ และทำให้โค้ดอ่านง่ายขึ้น โดย Promises เป็นวิธีการจัดการ asynchronous ที่มีความยืดหยุ่นมากกว่า callback function
getUser(userId)
.then(user => getPosts(user.id))
.then(posts => getComments(posts[0].id))
.then(comments => {
// ดำเนินการกับข้อมูลที่ได้รับมา
})
.catch(error => console.log(error));2. ใช้ Async/Await ซึ่ง Async/Await เป็นวิธีที่ใช้กับ Promises เพื่อช่วยลดการใช้งาน callback function ให้น้อยลง และทำให้โค้ดอ่านง่ายขึ้น
async function fetchData(userId) {
try {
const user = await getUser(userId);
const posts = await getPosts(user.id);
const comments = await getComments(posts[0].id);
// ดำเนินการกับข้อมูลที่ได้รับมา
} catch (error) {
console.log(error);
}
}
การเลือกวิธีที่เหมาะสม แนะนำให้เลือกจากวิธีที่เขียนแล้วรู้สึกว่าอ่านได้ง่าย รวมถึงสามารถปรับปรุงเปลี่ยนแปลงได้ง่ายด้วย เพราะมันจะเป็นการดีกับตัวเราในการต้องกลับมาอ่านโค้ดในอนาคตมากกว่า