`fetch` khác `XMLHttpRequest` thế nào? Hủy một request đang chạy bằng cách nào?

fetch là API chuẩn hiện đại thay cho XHR:

• Trả về Promise → dùng thẳng với async/await thay vì callback onreadystatechange.
• API sạch hơn với object Request/Response, hỗ trợ streaming body, và là API duy nhất dùng được trong Service Worker.
• Điểm hay gây bất ngờ: fetch không reject khi HTTP lỗi (404/500) — Promise chỉ reject khi lỗi mạng; phải tự kiểm tra response.ok.
• XHR chỉ còn lợi thế ở progress event cho upload (xhr.upload.onprogress).

Hủy request bằng AbortController:

• Tạo const controller = new AbortController(), truyền { signal: controller.signal } vào fetch.
• Gọi controller.abort() → Promise reject với AbortError (nên bắt riêng, đừng báo như lỗi thật).
• Use case điển hình: hủy request cũ khi người dùng gõ tiếp ô search, hoặc trong cleanup của useEffect khi component unmount — tránh setState trên component đã gỡ và race condition giữa các response về không đúng thứ tự.

const controller = new AbortController()
fetch('/api/search', { signal: controller.signal })
  .catch((err) => {
    if (err.name !== 'AbortError') throw err // aborts are expected
  })
controller.abort() // cancel the in-flight request