การจัดการเวลา (Async / Await)
เวทมนตร์สั่งหยุดคอย และความไม่ค้างของหน้าจอ!

ตามธรรมชาติแล้ว JavaScript เป็นภาษาแบบ Single-threaded หมายความว่ามันมี "สมองกล่องเดียวที่ทำงานได้ทีละอย่างในหนึ่งวินาที" หากเราเขียนระบบยิงไปดาวน์โหลดรูปภาพขนาดใหญ่จากอินเทอร์เน็ต แล้วใช้วิธีรันแบบ Synchronous ตัวเบราว์เซอร์จะหยุดนิ่ง ล็อคค้าง ไม่ยอมให้ขยับเมาส์เลยจนกว่ารูปภาพนั้นจะโหลดเสร็จ

เพื่อความลื่นไหลระดับสูง เราจึงต้องประยุกต์ใช้ Asynchronous ลองเปรียบเทียบภาพชีวิตจริงดังนี้:

ในภาษาจาวาสคริปต์ เมื่อเราทำคำสั่งดึงข้อมูลข้ามเครือข่าย ตัวแปรนั้นจะยังไม่มีค่าคำตอบในทันที แต่มันจะส่งออบเจกต์ที่ชื่อว่าPromise กลับมาให้เราถือครองไว้ชั่วคราว ซึ่งสัญญาใจนี้จะคอยส่งสัญญาณอัปเดตสเตตัส 3 ขั้นตอนดังนี้ครับ:

ในอดีต การรอคอยผลลัพธ์จาก Promise จะต้องเขียนพ่วงด้วยฟังก์ชัน .then() ยาวเยียดซ้อนกันเป็นทอด ๆ ส่งผลให้เกิดปัญหาเขียนโค้ดลึกโค้งเหมือนพีระมิด (Callback Hell) ทำความเข้าใจยาก

เพื่อความสะดวกสบายสูงสุด ปัจจุบันวิศวกรจึงนิยมใช้ไวยากรณ์คู่หู async / await เข้ามาสยบปัญหานี้:

การยิงเรียกข้อมูล API ด้วยคู่หูรอคอย
// 1. แปะคำว่า ' async ' ไว้หน้าชื่อฟังก์ชัน เพื่อเปิดใช้งานมิติอสมมาตร
async function fetchCargoShip() {
  
  console.log("ส่งคำขอสินค้าข้ามดวงดาว...");

  // 2. เติม ' await ' หน้าฟังก์ชัน Promise เพื่อสั่งหยุดคอยบรรทัดนี้ให้เสร็จก่อน
  // บรรทัดถัดไปข้างล่างจะยังไม่ทำงานจนกว่า ' fetch() ' จะคายผลสำเร็จออกมา!
  const response = await fetch("https://api.space-station.com/cargo");
  
  // 3. แปลงค่าผลลัพธ์ดิบให้กลายเป็นข้อมูลออบเจกต์ (และสั่งหยุดรอจนกว่าจะแปลงเสร็จ)
  const data = await response.json();

  // 4. เดินหน้าทำคำสั่งถัดไปได้อย่างลื่นไหลหลังได้รับข้อมูลตัวจริงเรียบร้อย!
  console.log("แกะข้อมูลตู้คอนเทนเนอร์สินค้า:", data);
  return data;
}

กฎเหล็กของคู่หูความเร็ว:

• คำว่า await จะสามารถนำมาเขียนใช้งานได้ **เฉพาะภายในฟังก์ชันที่ปะแบรนด์หัวด้วยคำว่า async เท่านั้น** ห้ามนำไปเขียนสุ่มสี่สี่สุ่มห้าข้างนอก
• แม้ว่า await จะสั่งหยุดอ่านโค้ดบรรทัดล่าง ๆ ในฟังก์ชันนั้นชั่วคราว แต่มันจะไม่สั่งล็อกหน้าเว็บหลักภายนอกเลย ทำให้ผู้ใช้งานไม่รู้สึกถึงความค้างแต่อย่างใด

ในการทำงานจริง โลกของอินเทอร์เน็ตไม่ได้สวยหรูตลอดเวลา บางครั้งสัญญาณอาจจะหลุด, เซิร์ฟเวอร์ API ดับพังเสียหาย (Rejected) หากเราปล่อยให้ระบบยิงโค้ด await ดื้อๆ โดยไม่มีตัวป้องกัน **หน้าเว็บของเราจะหยุดนิ่ง เสียหาย และขัดข้องทันที (Crash)**

ทางป้องกันที่ดีที่สุดคือการนำ **กล่องนิรภัยกางตาข่ายครอบภัยพิบัติ** ที่เรียกว่า try...catch มาสวมป้องกันไว้:

การสวมชุดเกราะดักป้องกันบั๊กพัง
async function safeCargoRequest() {
  // 🛡️ กางมุ้งนิรภัยพยายามทำคำสั่งหลักใน try
  try {
    const response = await fetch("https://api.space-station.com/cargo");
    const data = await response.json();
    return data;
  } 
  
  // 🚨 หากดึงพัง หรือเกิด Rejected กลางคัน โค้ดจะโดดโยนข้อผิดพลาดข้ามหัวมาเข้าบล็อค catch ทันที!
  catch (error) {
    console.error("🚨 ตรวจพบสัญญาณอินเทอร์เน็ตขัดข้องดักจับได้ดังนี้:", error.message);
    
    // เราสามารถอัปเดตสเตตัสข้อความเตือนสีแดงให้ผู้ใช้เห็นบนจอได้อย่างสงบเรียบร้อย
    showStatusAlert("ระบบเชื่อมต่อขัดข้อง กรุณาลองใหม่อีกครั้ง");
  }
}