ambil (simulasi)

Di halaman sebenarnya, fetch(url) memanggil server. Di sini, di browser pembelajaran kita tidak bisa berbicara dengan server eksternal, jadi kami akan menggunakan fetch "palsu": dalam pengujian, a globalThis.fetch dimasukkan yang mengembalikan data yang telah ditentukan sebelumnya, sehingga Anda dapat berlatih di logika tanpa bergantung pada jaringan.

API yang Anda pedulikan sama dengan yang asli:

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

fetch(url) mengembalikan Janji yang ditetapkan ke objek Response. Response.json() kembali pada gilirannya sebuah Janji dengan isi yang diurai. Jadi, Anda perlu dua menunggu.

Contoh lengkap

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

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

Memeriksa apakah berhasil

fetch tidak melempar jika server merespons dengan status kesalahan (404, 500). Itu masih memberi Anda a Response, tetapi dengan ok: false:

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

fetch hanya muncul jika jaringan gagal (tidak ada koneksi, DNS, ...).

Beberapa permintaan secara paralel: Promise.all

Jika Anda perlu melakukan N panggilan mandiri, luncurkan panggilan tersebut secara bersamaan dan tunggu semuanya dengan Promise.all:

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

Secara serial dengan dua awaits berturut-turut akan memakan waktu hampir dua kali lipat waktu (jumlah); secara paralel itu adalah maksimal keduanya (paling lambat).

Cobalah

Tinjau latihan