Async/Await

Async/Await ใน JavaScript: เขียนโค้ด Asynchronous ให้ง่ายเหมือน Synchronous

หลังจากที่เราได้เรียนรู้เรื่อง Promises ในบทที่แล้ว ซึ่งเป็นพื้นฐานสำคัญของการเขียน Asynchronous Programming ใน JavaScript บทนี้เราจะมาทำความรู้จักกับ async และ await ซึ่งเป็น syntax sugar ที่ช่วยให้การจัดการ Asynchronous Code นั้นง่ายและอ่านง่ายขึ้นมากยิ่งกว่าเดิม

Async/Await คืออะไร?

async และ await เป็น syntax ที่ถูกเพิ่มเข้ามาใน JavaScript เพื่อทำให้การเขียนโค้ด Asynchronous ดูเหมือนโค้ด Synchronous มากขึ้น ทำให้โค้ดอ่านง่ายขึ้น ลดความซับซ้อนของการจัดการ Promises และเพิ่มความสามารถในการจัดการข้อผิดพลาดได้อย่างมีประสิทธิภาพ

• async: เป็น keyword ที่ใช้หน้า function declaration หรือ function expression เพื่อบอกว่า function นั้นจะ return Promise เสมอ หาก function ไม่ได้ return Promise โดยตรง JavaScript จะทำการ wrap ค่าที่ return นั้นด้วย Promise.resolve() ให้โดยอัตโนมัติ
• await: เป็น keyword ที่ใช้ภายใน async function เท่านั้น มันจะหยุดการทำงานของ function ชั่วคราว (pause execution) จนกว่า Promise ที่ await รออยู่จะ resolve หรือ reject แล้วจึงค่อยดำเนินการต่อ

การใช้งาน async function

การประกาศ async function ทำได้ง่ายมาก เพียงแค่ใส่ keyword async หน้า function declaration หรือ expression:

async function myFunction() {
  // โค้ดที่ทำงานแบบ Asynchronous
}

const myAsyncFunction = async () => {
  // โค้ดที่ทำงานแบบ Asynchronous
};

เมื่อเรียกใช้งาน async function มันจะ return Promise เสมอ:

async function fetchData() {
  return 'Data from server';
}

fetchData().then(data => {
  console.log(data); // Output: Data from server
});

การใช้งาน await

await ใช้ภายใน async function เท่านั้น มันจะรอให้ Promise resolve หรือ reject ก่อนที่จะดำเนินการต่อ ตัวอย่าง:

async function fetchData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data from server after 2 seconds');
    }, 2000);
  });

  const data = await promise; // รอให้ Promise resolve
  console.log(data); // Output: Data from server after 2 seconds
  return data;
}

fetchData();

ในตัวอย่างข้างต้น await promise จะหยุดการทำงานของ fetchData function จนกว่า Promise ที่สร้างขึ้นจะ resolve หลังจาก 2 วินาที เมื่อ Promise resolve แล้ว data จะถูกกำหนดค่าเป็น 'Data from server after 2 seconds' และถูก log ออกมา

ตัวอย่างการใช้งาน Async/Await ร่วมกับ Fetch API

ลองมาดูตัวอย่างการใช้งาน async/await ร่วมกับ Fetch API เพื่อดึงข้อมูลจาก API:

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    throw error; // Re-throw error เพื่อให้ caller สามารถจัดการ error ได้
  }
}

async function displayUserData(userId) {
  try {
    const user = await fetchUserData(userId);
    console.log('User data:', user);
    // แสดงข้อมูลผู้ใช้ใน UI (สมมติว่ามี element ที่มี id="user-data")
    document.getElementById('user-data').textContent = `Name: ${user.name}, Email: ${user.email}`;

  } catch (error) {
    console.error('Failed to display user data:', error);
    document.getElementById('user-data').textContent = 'Failed to load user data.';
  }
}

// เรียกใช้งาน function เพื่อดึงข้อมูลผู้ใช้ที่มี ID เป็น 1
displayUserData(1);

ในตัวอย่างนี้:

• fetchUserData เป็น async function ที่ใช้ await เพื่อรอให้ fetch API return response และรอให้ response ถูกแปลงเป็น JSON
• displayUserData เป็น async function ที่เรียก fetchUserData และแสดงข้อมูลผู้ใช้ใน console และใน UI
• เราใช้ try...catch block เพื่อจัดการกับ error ที่อาจเกิดขึ้นระหว่างการ fetch ข้อมูล

การจัดการ Error ด้วย try...catch

การจัดการ error ใน async/await ทำได้ง่ายโดยใช้ try...catch block:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    // จัดการ error เช่น แสดงข้อความผิดพลาดให้ผู้ใช้
    return null; // หรือ throw error อีกครั้ง ขึ้นอยู่กับความต้องการ
  }
}

fetchData().then(data => {
  if (data) {
    console.log('Data:', data);
  } else {
    console.log('Failed to fetch data.');
  }
});

ในตัวอย่างนี้ ถ้าเกิด error ในระหว่างการ fetch หรือการแปลง JSON, catch block จะถูก execute และเราสามารถจัดการ error ได้ตามต้องการ

ข้อดีของ Async/Await

• อ่านง่ายและเข้าใจง่าย: โค้ดดูเหมือน Synchronous ทำให้ง่ายต่อการอ่านและทำความเข้าใจ
• จัดการ error ได้ง่าย: ใช้ try...catch block เพื่อจัดการ error ได้อย่างมีประสิทธิภาพ
• Debug ง่าย: การ debug โค้ด async/await ทำได้ง่ายกว่าการ debug โค้ด Promise ที่ซับซ้อน

ข้อควรระวัง

• await สามารถใช้ได้เฉพาะภายใน async function เท่านั้น
• การใช้ await มากเกินไปอาจทำให้ประสิทธิภาพลดลง เนื่องจากมันจะหยุดการทำงานของ function จนกว่า Promise จะ resolve ดังนั้นควรใช้เท่าที่จำเป็น

สรุป

async/await เป็นเครื่องมือที่มีประโยชน์มากในการเขียน Asynchronous Code ใน JavaScript มันช่วยให้โค้ดอ่านง่ายขึ้น จัดการ error ได้ง่ายขึ้น และลดความซับซ้อนของการจัดการ Promises ทำให้การพัฒนาเว็บแอปพลิเคชันเป็นไปได้อย่างราบรื่นและมีประสิทธิภาพมากยิ่งขึ้น ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการจัดการ Error ใน JavaScript กัน