Async JavaScript

Promise คืออะไร

Promise คือ object ที่แทนผลลัพธ์ในอนาคตของงาน asynchronous Promise มี 3 สถานะหลัก: `pending` คือกำลังรอ, `fulfilled` คือสำเร็จ, และ `rejected` คือไม่สำเร็จ เมื่อ Promise สำเร็จ เรารับค่าด้วย `.then()` เมื่อ Promise ล้มเหลว เราจัดการด้วย `.catch()`

const lessonPromise = Promise.resolve("Promises พร้อมเรียน");

lessonPromise.then(function (message) {
  console.log(message);
});

// output:
// Promises พร้อมเรียน

สร้าง Promise เอง

ใช้ `new Promise()` เมื่อต้องการครอบงานที่สำเร็จหรือล้มเหลวทีหลัง ด้านใน callback ของ Promise จะได้รับ `resolve` และ `reject` เป็น function ถ้างานสำเร็จให้เรียก `resolve(value)` ถ้างานล้มเหลวให้เรียก `reject(error)`

function loadUser(isLoggedIn) {
  return new Promise(function (resolve, reject) {
    if (isLoggedIn) {
      resolve({ name: "Mali" });
    } else {
      reject(new Error("กรุณาเข้าสู่ระบบ"));
    }
  });
}

loadUser(true)
  .then(function (user) {
    console.log(user.name);
  })
  .catch(function (error) {
    console.log(error.message);
  });

Promise chain

ถ้า `.then()` return ค่า ค่าใหม่จะถูกส่งต่อไปยัง `.then()` ถัดไป ถ้า `.then()` return Promise ระบบจะรอ Promise นั้นก่อนแล้วค่อยส่งผลลัพธ์ต่อ นี่คือวิธีลด callback ซ้อนหลายชั้น และทำให้ขั้นตอนงานอ่านจากบนลงล่างได้ชัดขึ้น

Promise.resolve(10)
  .then(function (price) {
    return price * 2;
  })
  .then(function (total) {
    console.log(total); // 20
  });

จุดที่ต้องจำ

• Promise ไม่ได้แปลว่างานเสร็จทันที แต่เป็นตัวแทนผลลัพธ์ที่จะรู้ทีหลัง
• ใช้ .then() กับงานสำเร็จ และ .catch() กับงานล้มเหลว
• return ค่าใน .then() เพื่อส่งค่าต่อไปยังขั้นถัดไป
• อย่าลืม return Promise ถ้าต้องการให้ chain รอ async step ถัดไป

Lab 1: สร้าง Promise ที่ resolve ค่า