Async JavaScript

async / await คืออะไร

`async / await` คือ syntax สำหรับเขียนโค้ดที่ทำงานกับ Promise ให้อ่านเหมือนลำดับปกติ `async` วางหน้า function เพื่อบอกว่า function นี้จะ return Promise เสมอ `await` ใช้ข้างใน async function เพื่อรอ Promise สำเร็จ แล้วนำค่าที่ resolve ออกมาใช้ต่อ

function loadName() {
  return Promise.resolve("Mali");
}

async function showName() {
  const name = await loadName();
  console.log(name); // Mali
}

showName();

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

`await` ทำให้ async function หยุดรอเฉพาะภายใน function นั้น แต่ไม่ได้หยุด JavaScript ทั้งหน้า โค้ดนอก async function ยังทำงานต่อได้ นี่คือเหตุผลที่ async code ไม่ทำให้หน้าเว็บค้างระหว่างรอผลลัพธ์

async function run() {
  console.log("ก่อน await");
  await Promise.resolve();
  console.log("หลัง await");
}

run();
console.log("โค้ดข้างนอก");

// output:
// ก่อน await
// โค้ดข้างนอก
// หลัง await

ใช้ await กับหลายขั้นตอน

เมื่อขั้นตอนถัดไปต้องใช้ผลลัพธ์จากขั้นก่อนหน้า ให้ใช้ `await` ทีละบรรทัด จะอ่านง่ายกว่าการต่อ `.then()` ยาว ๆ แต่ถ้างานหลายอย่างไม่ต้องรอกัน ควรเริ่ม Promise พร้อมกันแล้วค่อยรอทีหลัง เพื่อลดเวลารวม

Lab 1: รอ Promise ด้วย await