อธิบาย JavaScript Promises และ Async/Await

ลองจินตนาการว่าคุณสั่งพิซซ่าออนไลน์

คุณไม่ได้ยืนรออยู่ที่หน้าประตูเฉยๆ จนกว่าพิซซ่าจะมาส่ง แต่คุณอาจจะดูวิดีโอ ทำงาน หรือคุยกับเพื่อน และเมื่อพิซซ่ามาถึง คุณค่อยกิน

JavaScript ก็ทำงานในลักษณะเดียวกัน

งานต่างๆ เช่น การเรียก API หรือการดึงข้อมูลจากฐานข้อมูลต้องใช้เวลา หาก JavaScript ต้องรอให้แต่ละงานเสร็จสิ้นก่อน แอปของคุณก็จะค้าง แต่ในความเป็นจริง มันจะทำงานส่วนอื่นๆ ต่อไปในขณะที่กำลังรออยู่

Promise คือตัวแทนของค่าที่จะมาถึงในอนาคต

Promise มี 3 สถานะ:

คุณไม่ค่อยได้เห็นโค้ดที่ใช้สร้าง Promise ใหม่ด้วยตัวเอง เพราะเครื่องมือสมัยใหม่อย่าง fetch() จะคืนค่าเป็น Promise ให้คุณอยู่แล้ว

.then() ทำหน้าที่อะไร?

หลายคนเข้าใจผิดว่า .then() ทำหน้าที่ดึงข้อมูล แต่จริงๆ แล้วไม่ใช่

.then() ทำหน้าที่ลงทะเบียน callback function โดยคุณกำลังบอก JavaScript ว่า: "เมื่อ Promise นี้เสร็จสิ้น ให้รันฟังก์ชันนี้"

มันเหมือนกับแอปสั่งอาหาร คุณสั่งอาหารแล้วแอปก็บอกว่า: "เรียกฉันด้วยนะเมื่ออาหารมาถึง" ฟังก์ชันก็คือการรอคอยผลลัพธ์นั่นเอง

ทำไมต้องใช้ Async/Await?

คุณสามารถเขียน .then() ต่อกันเป็นทอดๆ (chaining) เพื่อดึงข้อมูลผู้ใช้ ตามด้วยโพสต์ และตามด้วยคอมเมนต์ ซึ่งมันใช้งานได้ แต่ถ้าต้องเขียนต่อกันยาวๆ มันจะอ่านยากมาก

Async/await ช่วยให้โค้ดดูเหมือนโค้ดปกติที่ทำงานทีละขั้นตอน ทำให้โค้ดสะอาดขึ้นและอ่านเข้าใจง่ายขึ้น

await ทำให้ JavaScript หยุดทำงาน (block) หรือไม่?

นี่เป็นคำถามยอดฮิตในการสัมภาษณ์งาน คำตอบคือ "ไม่"

เมื่อ JavaScript เจอคำสำคัญ await มันจะหยุดรอเฉพาะใน async function นั้นๆ เท่านั้น ส่วนที่เหลือของแอปพลิเคชันยังคงทำงานต่อไปได้ตามปกติ

ลำดับการทำงาน:

  1. รันโค้ดใน async function
  2. เจอ await และหยุดการทำงานของฟังก์ชันนั้นไว้
  3. รันส่วนที่เหลือของแอปพลิเคชันต่อไป
  4. เมื่อภารกิจเสร็จสิ้น จึงกลับมารัน async function ต่อ

Async/await เป็นเพียงวิธีการเขียน Promise ให้ดูสะอาดตาขึ้นเท่านั้น มันคือ syntactic sugar

สรุปประเด็นสำคัญ:

Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm