getir (simüle edilmiş)

Gerçek bir sayfada fetch(url) bir sunucuyu arar. Burada öğrenme tarayıcısında yapamayız harici sunucularla konuştuğumuz için "sahte" bir fetch kullanacağız: testlerde, globalThis.fetch önceden tanımlanmış verileri döndüren enjekte edilmiştir, böylece üzerinde pratik yapabilirsiniz. ağa bağlı olmadan mantık.

Önemsediğiniz API gerçek olanla aynıdır:

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

fetch(url), Response nesnesine çözümlenen bir Promise döndürür. Response.json() şunu döndürür: sırayla ayrıştırılmış gövdeyle bir Söz. Yani iki beklemeye ihtiyacınız var.

Tam örnek

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

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

Başarılı olup olmadığı kontrol ediliyor

fetch Sunucu bir hata durumuyla (404, 500) yanıt verirse atmaz. Hala sana veriyor bir Response, ancak ok: false ile:

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

fetch yalnızca ağ başarısız olursa (bağlantı yoksa, DNS, ...) atılır.

Paralel olarak birden fazla istek: Promise.all

N bağımsız çağrı yapmanız gerekiyorsa, bunları birlikte başlatın ve Promise.all ile hepsini bekleyin:

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

Seri olarak iki ardışık awaits ile neredeyse iki kat daha fazla zaman alacaktır (toplam); buna paralel olarak ikisinin maksimumu (en yavaş olanı).

Deneyin

Alıştırmayı gözden geçirin