async/await และ promise เป็นเครื่องมือสำหรับการจัดการกับการทำงานแบบ asynchronous ในภาษา JavaScript พูดให้เข้าใจง่ายๆ ก็คือการทำงานบางอย่างที่ต้องรอผลลัพธ์ เช่น การ request ข้อมูลจาก server หรือการอ่านข้อมูลจาก database ซึ่งจะใช้เวลาในการทำงานนานกว่าการทำงานที่เป็น synchronous ซึ่งเราจะต้องรอผลลัพธ์จาก asynchronous operation นั้น ก่อนที่จะทำงานต่อไป

Promises

Promise คือวิธีการจัดการกับ asynchronous operation ใน JavaScript โดยผลลัพธ์ของ promise จะเป็น asynchronous operation และจะมีสถานะที่เป็น fulfilled (operation สำเร็จ) หรือ rejected (operation ล้มเหลว) โดย promise จะช่วยให้เราเขียนโค้ดที่ดูเหมือน synchronous แต่เป็น asynchronous ได้ง่ายขึ้น

ตัวอย่างเกี่ยวกับการใช้ promise ในการทำ network request:

function getData() {
  return new Promise((resolve, reject) => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => resolve(json))
      .catch(error => reject(error));
  });
}
 
getData()
  .then(data => {
    // Do something with the data here
    console.log(data);
  })
  .catch(error => {
    // Handle any errors here
    console.error(error);
  });

ในตัวอย่างข้างต้น ฟังก์ชัน getData จะ return ค่า promise ที่จะถูก fulfilled ด้วยข้อมูลจาก network request หรือ rejected ด้วย error ถ้า request ล้มเหลว คุณสามารถใช้ method then ของ promise เพื่อระบุว่าจะเกิดอะไรขึ้นเมื่อ promise ถูก fulfilled และ method catch เพื่อระบุว่าจะเกิดอะไรขึ้นถ้า promise ถูก rejected

Async/await

Async/await คือ feature ภาษาที่ช่วยให้คุณเขียนโค้ดที่ดูเหมือน synchronous แต่เป็น asynchronous ซึ่งทำให้เขียนโค้ดที่ใช้ asynchronous operation ได้ง่ายขึ้น เช่น การทำ network request หรือการอ่านข้อมูลจาก database

ตัวอย่างเกี่ยวกับการใช้ async/await ในการทำ network request:

async function getData() {
    const response = await fetch('https://www.example.com/data.json');
    const data = await response.json();
    return data;
}

แล้วใช้ async/await หรือ promise ดี?

โดยทั่วไปแล้ว เราควรใช้ async/await ถ้า environment ของเรารองรับ (ก็น่าจะรองรับกันหมดแล้วมั้ง) โดยเพราะ async/await จะเขียนโค้ดที่ดูเหมือน synchronous แต่เป็น asynchronous ได้ง่ายขึ้น และเขียนได้สั้นและอ่านง่ายกว่า promise ซึ่ง async/await ถูกสร้างขึ้นบน promise ดังนั้นคุณสามารถใช้ async/await กับ API ที่ใช้ promise ได้เช่นเดียวกัน

จริงๆ ยังมีรายละเอียดอื่นๆ อีกมากมาย สามารถอ่านเพิ่มเติมได้จาก MDN และ Understand promises before you start using async/await ซึ่งในบทความนี้ผมอาจจะไม่ได้ลงรายละเอียดมากนัก แต่เราก็จะได้รู้จักกับ async/await, promise ว่ามันคืออะไร ใช้งานตอนไหน ประโยชน์คืออะไร ก็หวังว่าบทความนี้จะช่วยให้คุณได้รู้จักกับ async/await และ promise ได้มากขึ้น