เจาะลึก Async Function ใน JavaScript วิธีจัดการ Promise ให้โค้ดอ่านง่ายและทรงพลัง

การประกาศ Async Function คืออะไร

การประกาศ async function เป็นการสร้างฟังก์ชันรูปแบบใหม่ใน JavaScript เพื่อทำงานในลักษณะ Asynchronous โดยฟังก์ชันที่ถูกประกาศด้วยคีย์เวิร์ดนี้จะคืนค่ากลับมาเป็น Promise เสมอ

ข้อดีหลักของการใช้ async function คือการอนุญาตให้เราใช้คีย์เวิร์ด await ภายในฟังก์ชันนั้นได้ ซึ่งช่วยให้การเขียนโค้ดที่ต้องรอผลลัพธ์ (เช่น การดึงข้อมูลจาก API) ดูเหมือนการเขียนโค้ดแบบ Synchronous ปกติ ทำให้อ่านและทำความเข้าใจได้ง่ายขึ้น

ไวยากรณ์ (Syntax)

รูปแบบการประกาศ Syntax ของฟังก์ชันมีดังนี้:

async function name(param0) {
  statements
}
async function name(param0, param1) {
  statements
}
async function name(param0, param1, /* … ,*/ paramN) {
  statements
}

รายละเอียดการทำงาน

เมื่อคุณเรียกใช้ function ที่เป็น async มันจะคืนค่าเป็น Promise ทันที หากฟังก์ชันนั้นมีการ return ค่าออกมาตามปกติ (Non-promise value) ค่าที่ได้นั้นจะถูกห่อหุ้ม (Wrapped) เข้าไปใน Promise ที่สถานะ resolved โดยอัตโนมัติ

ในทางกลับกัน หากมีการ throw exception ภายใน async function ค่า Promise ที่คืนกลับมาจะมีสถานะเป็น rejected พร้อมกับค่า error นั้น

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

ตัวอย่างโค้ดด้านล่างแสดงให้เห็นถึงการใช้ async function เพื่อรอเวลาเป็นระยะเวลาหนึ่งก่อนที่จะทำงานต่อ:

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();

จากตัวอย่าง เมื่อเรียกใช้ asyncCall โปรแกรมจะแสดงคำว่า "calling" ก่อน จากนั้นจะรอเป็นเวลา 2 วินาทีด้วยคำสั่ง await ก่อนที่จะแสดงคำว่า "resolved" ซึ่งเป็นผลลัพธ์จากการทำงานของ Promise

สรุป

การใช้ async function และ await ช่วยให้นักพัฒนา Web Development สามารถจัดการกับการทำงานแบบ Asynchronous ได้อย่างเป็นระเบียบ ลดความซับซ้อนของโค้ดแบบ Promise chain หรือ Callback hell แบบเดิมๆ