Skip to content

Asynchronous คือ งานที่ไม่ต้องรอ

Callback

Callback คือ ฟังก์ชันที่ส่งฟังก์ชันไปให้เรียกเมื่อเสร็จงาน

js
function loadData(callback) {
  setTimeout(() => {
    callback("ข้อมูลมาแล้ว!");
  }, 1000);
}

loadData(data => {
  console.log(data);
});

Promise

Promise เป็นวิธีการในการจัดการกับ asynchronous code ซึ่งจะคืนค่าที่สามารถอยู่ในสามสถานะ: pending, resolved หรือ rejected

js
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "John", age: 30 };
      resolve(data); // เมื่อข้อมูลเสร็จสมบูรณ์ ให้ resolve ค่า
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log("Data received:", data);
  })
  .catch(error => {
    console.log("Error:", error);
  });

Async/Await

Async/Await เป็นวิธีการใหม่ในการจัดการกับ asynchronous code

js
async function getData() {
  try {
    const data = await fetchData();
    console.log("Data received:", data);
  } catch (error) {
    console.log("Error:", error);
  }
}

ข้อควรรู้

Async/Await สามารถแทน Callback หรือ Promise ได้เกือบทุกกรณี

  • เป็นมาตรฐานใหม่ของ JavaScript ที่ได้รับการสนับสนุนอย่างเป็นทางการ
  • ใช้ได้ทั้งใน browser และ Node.js โดยไม่ต้องใช้เครื่องมือเสริม
  • มีความชัดเจนในการจัดการกับ asynchronous code
  • มีการจัดการกับ error ที่ดีกว่า
  • ทำให้โค้ดง่ายขึ้นและเข้าใจได้ง่ายขึ้น
js