AbortController — ยกเลิก fetch ที่กำลังรอได้

AbortController ให้ cancel async operation ที่ยังไม่เสร็จได้ — ใช้บ่อยกับ fetch เพื่อป้องกัน race condition หรือยกเลิก request เมื่อ user navigate ออก

const controller = new AbortController();
const { signal } = controller;

// ส่ง signal ไปกับ fetch
fetch('/api/data', { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Request cancelled'); // ยกเลิกแล้ว — ไม่ใช่ error จริง
    }
  });

// ยกเลิก request
controller.abort();

ยกเลิกเมื่อ component unmount (React-like pattern):

function useData(url) {
  useEffect(() => {
    const controller = new AbortController();

    fetch(url, { signal: controller.signal })
      .then(r => r.json())
      .then(setData)
      .catch(e => { if (e.name !== 'AbortError') throw e; });

    return () => controller.abort(); // cleanup ยกเลิก request ที่ค้างอยู่
  }, [url]);
}

Timeout ด้วย AbortSignal.timeout():

// ยกเลิกอัตโนมัติถ้าเกิน 5 วินาที (ไม่ต้องสร้าง controller เอง)
fetch('/api/slow', { signal: AbortSignal.timeout(5000) });

ยกเลิกหลาย operation พร้อมกัน:

const controller = new AbortController();
await Promise.all([
  fetch('/api/a', { signal: controller.signal }),
  fetch('/api/b', { signal: controller.signal }),
]);
// controller.abort() ยกเลิกทั้งคู่พร้อมกัน