fetch (simuliert)

Auf einer echten Webseite ruft fetch(url) einen Server auf. Hier im Lern-Browser können wir nicht mit externen Servern kommunizieren, daher verwenden wir ein „simuliertes“ fetch: In den Tests wird ein globalThis.fetch injiziert, das vordefinierte Daten zurückgibt, damit du die Logik üben kannst, ohne vom Netzwerk abhängig zu sein.

Die API, die dich interessiert, ist genau dieselbe wie die echte:

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

fetch(url) gibt ein Promise zurück, das zu einem Response-Objekt aufgelöst wird. Response.json() wiederum gibt seinerseits ein Promise mit dem geparsten Body zurück. Daher sind zwei await erforderlich.

Vollständiges Beispiel

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

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

Prüfen, ob es erfolgreich war

fetch wirft keinen Fehler, wenn der Server mit einem Fehlerstatus (404, 500) antwortet. Es gibt dir trotzdem eine Response, aber mit ok: false:

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

fetch wirft nur dann einen Fehler, wenn das Netzwerk ausfällt (keine Verbindung, DNS-Fehler usw.).

Mehrere Anfragen parallel: Promise.all

Wenn du N unabhängige Aufrufe durchführen musst, starte sie zusammen und warte mit Promise.all auf alle:

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

Nacheinander mit zwei aufeinanderfolgenden awaits würde fast die doppelte Zeit benötigen (Summe); parallel dauert es so lange wie die langsamste Anfrage (das Maximum von beiden).

Probier es aus

Wiederholungsübung