ทำไม async/await ยังเป็น Non-blocking?

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

Loading