fetch (symulowane)

Na prawdziwej stronie fetch(url) wysyła zapytanie do serwera. Tutaj, w przeglądarce do nauki, nie możemy komunikować się z zewnętrznymi serwerami, dlatego użyjemy „fałszywego” fetch: w testach wstrzykiwany jest obiekt globalThis.fetch, który zwraca predefiniowane dane. Dzięki temu możesz ćwiczyć logikę bez zależności od sieci.

Interfejs API, który Cię interesuje, jest dokładnie taki sam jak ten rzeczywisty:

const risposta = await fetch('/api/utenti');
const dati = await risposta.json();

fetch(url) zwraca Promise, które rozstrzyga się do obiektu Response. Response.json() zwraca z kolei kolejne Promise z przetworzoną zawartością (body). Dlatego potrzebne są dwa wywołania await.

Pełny przykład

async function caricaUtenti() {
  const risposta = await fetch('/api/utenti');
  const utenti = await risposta.json();
  return utenti;
}

const lista = await caricaUtenti();
// [{...}, {...}]

Sprawdzanie poprawności odpowiedzi

fetch nie rzuca błędu, jeśli serwer odpowie kodem błędu (np. 404, 500). Wciąż zwraca obiekt Response, tyle że z właściwością ok: false:

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

fetch rzuca błąd tylko wtedy, gdy zawiedzie sama sieć (brak połączenia, błąd DNS itp.).

Wiele żądań równolegle: Promise.all

Jeśli musisz wykonać N niezależnych zapytań, uruchom je wspólnie i poczekaj na wszystkie za pomocą Promise.all:

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

Wykonywanie sekwencyjne z dwoma kolejnymi await zajęłoby prawie dwa razy więcej czasu (suma); równolegle zajmie tyle, ile najwolniejsze z nich (maksymalna wartość z obu).

Spróbuj sam

Ćwiczenie powtórzeniowe