🔥เมื่อเจอ await
→ โค้ดจะ “หยุดรอ” ผลลัพธ์ แค่ ภายในฟังก์ชันนั้น
แต่ Event Loop ยังคงทำงานต่อ → Node.js ยังสามารถรับคำขออื่น ๆ หรือประมวลผลงานอื่นได้
เมื่อ Promise
เสร็จ → ฟังก์ชัน async
จะกลับมาทำงานต่อจากจุดที่ await
ค้างไว้
🚀 ตัวอย่างการทำงานของ async/await
async function fetchData() {
console.log("เริ่มดึงข้อมูล...");
const result = await new Promise((resolve) => {
setTimeout(() => {
resolve("ข้อมูลโหลดเสร็จแล้ว!");
}, 2000);
});
console.log(result);
}
console.log("ก่อนเรียก fetchData()");
fetchData();
console.log("หลังเรียก fetchData()");
🔍 ผลลัพธ์
ก่อนเรียก fetchData()
เริ่มดึงข้อมูล...
หลังเรียก fetchData()
(รอ 2 วินาที)
ข้อมูลโหลดเสร็จแล้ว!
📌 สังเกต: “หลังเรียก fetchData()” ถูกพิมพ์ก่อน “ข้อมูลโหลดเสร็จแล้ว!”
แสดงว่า โค้ดยังคงทำงานต่อ ระหว่างที่ await
กำลังรอ Promise
🤔 ถ้า async/await
ต้องรอ แล้วมันดีกว่า .then()
ยังไง?
ก่อน async/await
เราต้องใช้ .then()
ซึ่งอ่านยากกว่านี้:
function fetchData() {
console.log("เริ่มดึงข้อมูล...");
return new Promise((resolve) => {
setTimeout(() => {
resolve("ข้อมูลโหลดเสร็จแล้ว!");
}, 2000);
});
}
console.log("ก่อนเรียก fetchData()");
fetchData().then(result => {
console.log(result);
});
console.log("หลังเรียก fetchData()");
ได้ผลลัพธ์เหมือนกัน แต่ async/await
อ่านง่ายกว่า! 🎯
🔥 await
รอได้ แต่ไม่บล็อกโปรแกรม
ถ้าต้องรอหลาย await
แบบขนาน ให้ใช้ Promise.all()
❌ ทำงานทีละงาน (ช้า)
async function run() {
const data1 = await fetchData();
const data2 = await fetchData();
console.log(data1, data2);
}
⏳ รวมกันใช้เวลา 4 วินาที (2+2) เพราะรอ data1
ก่อน แล้วค่อยรอ data2
✅ ทำงานพร้อมกัน (เร็วกว่า)
async function run() {
const [data1, data2] = await Promise.all([fetchData(), fetchData()]);
console.log(data1, data2);
}
⚡ รวมกันใช้เวลาแค่ 2 วินาที! เพราะทั้งสองงานรันพร้อมกัน
🎯 สรุป
- ✅
async/await
ทำให้โค้ดอ่านง่ายขึ้น - ✅
await
รอได้ แต่ ไม่บล็อก Event Loop - ✅ ถ้ามีหลายงาน ใช้
Promise.all()
เพื่อให้ทำงานขนานกัน - ✅
async/await
ยังเป็น Non-blocking เพราะมันแค่ “พักการทำงานของฟังก์ชันตัวเอง” ไม่ได้หยุด Node.js ทั้งหมด
🔥 สั้น ๆ: await
รอผลลัพธ์ได้ แต่ Node.js ไม่ได้หยุดรอ! 🚀