เจาะลึกวิธีใช้ For Await Of ใน JavaScript จัดการลูป Asynchronous ขั้นเทพ

ทำความรู้จักกับ For Await Of

คำสั่ง for await...of ในภาษา JavaScript ใช้สำหรับสร้างลูปเพื่อวนซ้ำข้อมูลจาก Object ที่เป็น async iterable (รวมถึง iterable แบบปกติด้วย) โดยหลักการทำงานจะคล้ายกับ for...of แต่ส่วนที่พิเศษคือมันสามารถรอรับค่าจาก Promise ที่ถูกส่งออกมาในแต่ละรอบการวนลูปได้

เรามักจะใช้งานคำสั่งนี้ภายใน async function หรือ async generator เพื่อจัดการกับข้อมูลที่ไม่ได้มาพร้อมกันในทันที เช่น การดึงข้อมูลแบบ Streaming หรือการอ่านไฟล์ขนาดใหญ่ทีละส่วน

ไวยากรณ์ (Syntax)

รูปแบบการเขียน Syntax นั้นเข้าใจง่าย ดังนี้:

for await (variable of iterable) {
  statement
}

ความแตกต่างระหว่าง For Of และ For Await Of

ในขณะที่ for...of ปกติจะใช้กับข้อมูลที่มีอยู่แล้ว (Synchronous) การใช้ for await...of จะทำการ await ค่าแต่ละค่าที่ได้รับจาก iterable โดยอัตโนมัติ ทำให้มั่นใจได้ว่าข้อมูลในรอบนั้นๆ ถูกโหลดหรือประมวลผลเสร็จสิ้นก่อนที่จะเริ่มรอบถัดไป

ตัวอย่างการใช้งานกับ Async Generators

ตัวอย่างนี้แสดงการวนลูปตัวเลขที่ถูกส่งออกมาแบบไม่พร้อมกัน (Asynchronous) โดยใช้ Async Generator:

async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    yield i++;
    // จำลองการรอ 1 วินาทีในแต่ละรอบ
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

(async function() {
  for await (const num of asyncGenerator()) {
    console.log(num);
  }
})();
// Output:
// 0
// 1
// 2

การใช้เทคนิคนี้ช่วยให้นักพัฒนา Web Development เขียนโค้ดที่อ่านง่ายขึ้นเมื่อต้องจัดการกับข้อมูลที่เป็น Stream หรือ Array ของ Promise จำนวนมาก