fetch (simulato)

In una pagina vera, fetch(url) chiama un server. Qui nel browser di apprendimento non possiamo parlare con server esterni, quindi useremo un fetch "finto": nei test viene iniettato un globalThis.fetch che restituisce dati predefiniti, così puoi esercitarti sulla logica senza dipendere dalla rete.

L'API che ti interessa è sempre la stessa di quella reale:

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

fetch(url) ritorna una Promise che si risolve in un oggetto Response. Response.json() ritorna a sua volta una Promise col body parsato. Quindi servono due await.

Esempio completo

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

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

Controllare se è andata bene

fetch non lancia se il server risponde con uno status di errore (404, 500). Ti dà comunque una Response, ma con ok: false:

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

fetch lancia solo se la rete fallisce (nessuna connessione, DNS, ...).

Più richieste in parallelo: Promise.all

Se devi fare N chiamate indipendenti, lanciale insieme e aspetta tutte con Promise.all:

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

In serie con due await consecutivi sarebbe quasi il doppio del tempo (somma); in parallelo è il massimo dei due (più alto).

Prova tu

Esercizio di ripasso