การจัดการ Callback ด้วย Async Wait

สวัสดีครับมาเจอกับผมอีกครั้ง วันนี้ผมขอนำเสนอ การจัดการ Callback ด้วย Async wait อย่าพึ่ง งงครับ เดี่ยวอธิบายให้ฟังนิดนึงก่อน นะครับ

คราวก่อนผมเคยนำเสนอเรื่องของ promise และ observable ซึ่งการทำงานคล้ายๆกัน ปัญหาของ 2 ฟังก์ชั่นคือ ถ้าเกิดว่ามีการ นำค่าจากตัวแปรหนึ่งไปใช้กับอีกฟังชั่นหนึ่ง ปรากฎว่า ฟังชั่นแรกส่งค่ามาให้ฟังก์ชั่นที่ 2 ไม่ทัน ทำให้เกิด callback oid หรือเรียกว่า callback hell นั้น ทำให้ฟังก์ชั่นที่ 2 ไม่สามารถทำงานต่อไปได้

นั่นแหละครับคือโจทย์ของวันนี้ครับ เนื่องจากเกิดปัญหา callabck hell นี้แหละทางผู้พัฒนาจึงได้ สร้าง ฟังก์ชั่นตัวหนึ่งขึ้นมา เรียกว่า Async wait ความหมายคือให้รอ ให้ฟังก์ชั่นแรกทำงานเสร็จก่อน ค่อยไปทำงานส่วนอื่นต่อ ผมเล่าให้ฟังพอคร่าวๆ เดี่ยวเรามาลองดูตัวอย่างการใช้งานกันดีกว่าครับ เริ่มเลยนะครับ…

ผมเขียนโค้ดดึงข้อมูลจาก Http แล้วมีการใช้ promise รับค่าข้อมูลเข้ามา ถ้าดูจากโค้ดที่ผมเขียน ข้อความว่า “ผลลัพธ์หลังจากฟังก์ชั่นทำงานเสร็จ” ต้องทำงานก่อน แล้ว ข้อความ “โค้ดหลังฟังก์ชั่นทำงาน” ต้องทำงานต่อมา 
คราวนี้ผมลองรันดูก่อน ng serve

หลังจากรันเสร็จปรากฎว่า ไม่เป็นไปตามที่เราเขียนเอาไว้ กลับเป็นว่า คำสั่งบรรทัดสุดท้าย ทำงานก่อน และข้อความ “ผลลัพธ์หลังจากฟังก์ชั่นทำงานเสร็จ” กลับทำงานทีหลัง

Like what you read? Give Sutin Injitt a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.