lấy (mô phỏng)

Trên trang thực, fetch(url) gọi máy chủ. Ở đây trong trình duyệt học tập, chúng tôi không thể nói chuyện với các máy chủ bên ngoài, vì vậy chúng tôi sẽ sử dụng fetch "giả": trong các thử nghiệm, một globalThis.fetch được chèn trả về dữ liệu được xác định trước, do đó bạn có thể thực hành trên logic mà không phụ thuộc vào mạng.

API bạn quan tâm giống với API thật:

const response = await fetch('/api/utenti');
const data = await response.json();

fetch(url) trả về Lời hứa phân giải thành đối tượng Response. Response.json() trả lại lần lượt một Promise với nội dung được phân tích cú pháp. Vì vậy, bạn cần hai chờ đợi.

Ví dụ hoàn chỉnh

async function loadUsers() {
  const response = await fetch('/api/utenti');
  const users = await response.json();
  return users;
}

const list = await loadUsers();
// [{...}, {...}]

Kiểm tra xem nó có thành công không

fetch không ném nếu máy chủ phản hồi với trạng thái lỗi (404, 500). Nó vẫn mang lại cho bạn một Response, nhưng với ok: false:

const r = await fetch('/api/utenti');
if (!r.ok) {
  throw new Error(`HTTP ${r.status}`);
}
const data = await r.json();

fetch chỉ ném nếu mạng bị lỗi (không có kết nối, DNS, ...).

Nhiều yêu cầu song song: Promise.all

Nếu bạn cần thực hiện N cuộc gọi độc lập, hãy khởi chạy chúng cùng nhau và đợi tất cả chúng bằng Promise.all:

const [u, p] = await Promise.all([
  fetch('/api/utenti').then((r) => r.json()),
  fetch('/api/prodotti').then((r) => r.json()),
]);

Thực tế với hai await liên tiếp sẽ mất gần gấp đôi thời gian (tổng); song song đó là tối đa của cả hai (chậm nhất).

Hãy thử nó

Xem lại bài tập