Async JavaScript

Error ใน async code เกิดอย่างไร

เมื่อ Promise ล้มเหลว จะเข้าสู่สถานะ `rejected` แทนที่จะ throw แบบ synchronous ทันที ถ้าใช้ `.then()` ให้จัดการ error ด้วย `.catch()` ถ้าใช้ `await` ให้ห่อด้วย `try...catch` เป้าหมายคือไม่ปล่อยให้ error หายเงียบหรือกลายเป็น unhandled rejection

function loadProfile() {
  return Promise.reject(new Error("โหลด profile ไม่สำเร็จ"));
}

loadProfile()
  .then(function (profile) {
    console.log(profile);
  })
  .catch(function (error) {
    console.log(error.message);
  });

try...catch กับ await

เมื่อใช้ `await` กับ Promise ที่ reject บรรทัดนั้นจะ throw error เข้าสู่ `catch` ได้เหมือนโค้ด synchronous รูปแบบนี้อ่านง่ายเมื่อมีหลาย await ใน function เดียว และต้องการจัดการ error ในที่เดียว

async function showProfile() {
  try {
    const profile = await loadProfile();
    console.log(profile.name);
  } catch (error) {
    console.log("แสดงข้อความให้ผู้ใช้:", error.message);
  } finally {
    console.log("ปิด loading");
  }
}

showProfile();

ออกแบบข้อความ error

• ใช้ error.message สำหรับข้อความที่อธิบายปัญหา
• แยกข้อความสำหรับ developer ออกจากข้อความที่แสดงให้ผู้ใช้เมื่อจำเป็น
• ใช้ finally สำหรับ cleanup เช่น ปิด loading ไม่ว่างานสำเร็จหรือล้มเหลว
• อย่าจับ error แล้วไม่ทำอะไร เพราะจะทำให้ debug ยาก

Lab 1: จับ error จาก await