Fetch API là gì? Khác XMLHttpRequest như thế nào?

fetch() là API HTTP dựa trên Promise, thay cho XMLHttpRequest.

javascript

const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Định' }),
  signal: controller.signal,      // huỷ được bằng AbortController
})

if (!res.ok) throw new Error(`HTTP ${res.status}`)   // BẮT BUỘC tự kiểm tra
const data = await res.json()

Điểm gây bất ngờ nhất — fetch không reject khi server trả lỗi:

javascript

try {
  const res = await fetch('/khong-ton-tai')   // 404
  // KHÔNG vào catch — Promise vẫn fulfilled
  console.log(res.ok, res.status)             // false 404
} catch (e) {
  // chỉ vào đây khi lỗi MẠNG: mất kết nối, CORS chặn, DNS hỏng
}

Đây là lý do mọi wrapper fetch trong dự án thật đều bắt đầu bằng if (!res.ok) throw ....

	`fetch`	`XMLHttpRequest`
API	Promise, `async/await`	callback / sự kiện
Lỗi HTTP	không reject	không reject
Huỷ	`AbortController`	`xhr.abort()`
Tiến độ tải lên	không hỗ trợ	có `progress` event
Streaming phần trả về	có	hạn chế
Service Worker	có	không

Lưu ý 2: cookie không được gửi kèm khi gọi khác origin nếu thiếu credentials: 'include'.

Chốt: hai chỗ XMLHttpRequest vẫn hơn là theo dõi tiến độ upload và hỗ trợ trình duyệt rất cũ — ngoài ra fetch là mặc định.

Xem toàn bộ JavaScript cùng filter theo level & chủ đề con.

Mở danh sách JavaScript

fetch() là API HTTP dựa trên Promise, thay cho XMLHttpRequest.

javascript

const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Định' }),
  signal: controller.signal,      // huỷ được bằng AbortController
})

if (!res.ok) throw new Error(`HTTP ${res.status}`)   // BẮT BUỘC tự kiểm tra
const data = await res.json()

Điểm gây bất ngờ nhất — fetch không reject khi server trả lỗi:

javascript

try {
  const res = await fetch('/khong-ton-tai')   // 404
  // KHÔNG vào catch — Promise vẫn fulfilled
  console.log(res.ok, res.status)             // false 404
} catch (e) {
  // chỉ vào đây khi lỗi MẠNG: mất kết nối, CORS chặn, DNS hỏng
}

Đây là lý do mọi wrapper fetch trong dự án thật đều bắt đầu bằng if (!res.ok) throw ....

	`fetch`	`XMLHttpRequest`
API	Promise, `async/await`	callback / sự kiện
Lỗi HTTP	không reject	không reject
Huỷ	`AbortController`	`xhr.abort()`
Tiến độ tải lên	không hỗ trợ	có `progress` event
Streaming phần trả về	có	hạn chế
Service Worker	có	không

Lưu ý 2: cookie không được gửi kèm khi gọi khác origin nếu thiếu credentials: 'include'.

Chốt: hai chỗ XMLHttpRequest vẫn hơn là theo dõi tiến độ upload và hỗ trợ trình duyệt rất cũ — ngoài ra fetch là mặc định.