พื้นฐานของ JavaScript : Promise / Async / Await

---

1. ทำไมต้องมี Asynchronous ?

ปกติ JavaScript ทำงานแบบทีละบรรทัด (Synchronous)
แต่ในชีวิตจริงบางอย่างใช้เวลานาน เช่น

• โหลดข้อมูลจาก Server (API)

• อ่านไฟล์

• รอผู้ใช้งานทำอะไรบางอย่าง

ถ้ารอเสร็จก่อนทำงานต่อทั้งหมด โปรแกรมจะช้าและค้าง
เราจึงใช้ Asynchronous เพื่อให้ JavaScript:

• สั่งทำงาน

• แล้วไปทำงานอื่นต่อได้ทันที

• เมื่อเสร็จแล้วค่อยกลับมารับผลลัพธ์

---

2. Callback (พื้นฐาน Asynchronous แบบเก่า)

ก่อนจะมี Promise เราใช้ Callback

ตัวอย่าง (จำลองโหลดข้อมูล)

javascript

function loadData(callback) {
  setTimeout(() => {
    callback("ข้อมูลจาก server");
  }, 2000);
}

loadData(function(result) {
  console.log(result);
});

ข้อเสียคือ Callback hell เวลาเขียนซ้อนหลายชั้นจะอ่านยาก

---

3. Promise (ช่วยแก้ Callback hell)

Promise คือสัญญาว่าจะได้ผลลัพธ์ในอนาคต

มี 3 สถานะ

• Pending = กำลังทำงาน

• Fulfilled = สำเร็จ

• Rejected = ล้มเหลว

การสร้าง Promise:

javascript

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve("โหลดข้อมูลสำเร็จ");
    // หรือ reject("โหลดข้อมูลล้มเหลว");
  }, 2000);
});

การใช้งานด้วย .then() และ .catch()

javascript

promise
  .then(function(result) {
    console.log(result);
  })
  .catch(function(error) {
    console.log(error);
  });

---

4. ตัวอย่าง Promise แบบเต็ม

javascript

function loadData() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      let success = true;
      if (success) {
        resolve("โหลดข้อมูลสำเร็จ");
      } else {
        reject("เกิดข้อผิดพลาด");
      }
    }, 2000);
  });
}

loadData()
  .then(result => console.log(result))
  .catch(error => console.log(error));

---

5. Async / Await (เขียน Asynchronous ให้เหมือน Synchronous)

async / await ถูกเพิ่มมาใน ES8 เพื่อให้เขียนง่ายขึ้น

• async ใส่หน้า function เพื่อบอกว่าฟังก์ชันนี้เป็น async

• await ใช้หน้าคำสั่งที่เป็น Promise เพื่อรอผลลัพธ์

ตัวอย่าง

javascript

async function getData() {
  try {
    let result = await loadData();
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

getData();

ดูเรียบร้อยเหมือน synchronous แต่ทำงานแบบ asynchronous อยู่เบื้องหลัง

---

6. สรุปสั้นๆ

• Asynchronous = สั่งงานไว้ก่อน แล้วทำงานอื่นได้ทันที

• Callback = เรียก function ซ้อนกัน (ยุ่งยากเมื่อซ้อนเยอะ)

• Promise = แก้ callback hell ด้วย .then() / .catch()

• Async/Await = เขียนโค้ด asynchronous ให้อ่านง่ายเหมือน synchronous

---

7. ตัวอย่างสมบูรณ์มากขึ้น

javascript

function getUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "มิว", age: 25 });
    }, 1000);
  });
}

async function showUser() {
  console.log("กำลังโหลด...");
  let user = await getUser();
  console.log(user);
}

showUser();

ผลลัพธ์:

กำลังโหลด...
{ name: "มิว", age: 25 }

---

สรุปแบบง่ายที่สุด

ถ้าคุณเริ่มต้นเขียน JavaScript ในยุคปัจจุบัน:
พยายามใช้ async/await เป็นหลักครับ