ophalen (gesimuleerd)

Op een echte pagina roept fetch(url) een server aan. Hier in de leerbrowser kunnen we dat niet praat met externe servers, dus we zullen een "nep" fetch gebruiken: in de tests zal een globalThis.fetch is geïnjecteerd en retourneert vooraf gedefinieerde gegevens, zodat u kunt oefenen op de logica zonder afhankelijk te zijn van het netwerk.

De API waar u om geeft is dezelfde als de echte:

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

fetch(url) retourneert een belofte die wordt omgezet in een Response object. Response.json() keert terug op zijn beurt een belofte met het ontlede lichaam. Je hebt dus twee wachttijden nodig.

Compleet voorbeeld

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

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

Controleren of het gelukt is

fetch gooit niet als de server reageert met een foutstatus (404, 500). Het geeft je nog steeds een Response, maar met ok: false:

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

fetch genereert alleen als het netwerk uitvalt (geen verbinding, DNS, ...).

Meerdere verzoeken parallel: Promise.all

Als je N onafhankelijke oproepen moet doen, start je ze samen en wacht je op ze allemaal met Promise.all:

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

Serieel met twee opeenvolgende awaits zou het bijna twee keer zo lang duren (som); parallel is het de maximum van de twee (de langzaamste).

Probeer het

Oefening beoordelen