async/await ทำงานอย่างไร

Question

Accepted Answer

`async/await` คือ **syntax sugar เหนือ Promises** ที่ให้คุณเขียนโค้ดแบบ asynchronous ที่อ่านเหมือนโค้ด synchronous ฟังก์ชัน `async` จะส่งคืน Promise เสมอ `await` จะหยุดฟังก์ชันจนกว่า Promise จะแก้ไขแล้วเริ่มต้นใหม่ด้วยค่าของมัน

```js
async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`); // pause until the response
    const user = await res.json();               // pause until parsed
    return user;                                  // becomes the resolved value
  } catch (err) {
    console.error(err); // catches rejections from any await above
  }
}
```

## Sequential vs parallel — ข้อผิดพลาดด้านประสิทธิภาพทั่วไป

`await` รันสิ่งต่างๆ **ทีละอย่าง** หากคำขอสองรายการไม่ขึ้นอยู่กับกันและกัน การรอให้พวกมันใช้งานตามลำดับจะช้าโดยไม่จำเป็น:

```js
// ❌ sequential — total time = a + b
const a = await getA();
const b = await getB();

// ✅ parallel — total time = max(a, b)
const [a, b] = await Promise.all([getA(), getB()]);
```

## การจัดการข้อผิดพลาด

ใช้ `try/catch` แทน `.catch` Promise ที่ถูกปฏิเสธจะขว้าง ดังนั้น `catch` ครั้งเดียวจะครอบคลุมบล็อกทั้งหมด

## ใต้ฮูด

ยังคง Promises และ microtask queue — `await` ไม่ปิดกั้น thread เพียงแต่ให้สิทธิ์ต่อเพื่อให้โค้ดอื่นๆ ทำงาน จากนั้นเริ่มต้นใหม่ อย่าลืม: เรียกฟังก์ชัน `async` โดยไม่ `await` (หรือ `.catch`) อาจซ่อนข้อผิดพลาด

## ทำไมมันถึงสำคัญ

มันทำให้ async flow อ่านได้ และเป็นค่าเริ่มต้นสมัยใหม่สำหรับการสั่งลำดับงาน async — แต่คุณต้องขนานความเป็นอิสระแบบสมูดด้วย `Promise.all`