🔥เมื่อเจอ 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 ไม่ได้หยุดรอ! 🚀
![]()