aduce (simulat)

Pe o pagină reală, fetch(url) apelează un server. Aici, în browserul de învățare, nu putem vorbim cu servere externe, așa că vom folosi un „fals” fetch: în teste, un globalThis.fetch este injectat care returnează date predefinite, astfel încât să puteți exersa pe logica fara a depinde de retea.

API-ul care vă interesează este același cu cel real:

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

fetch(url) returnează o Promisiune care se rezolvă la un obiect Response. Response.json() revine la rândul său o Promisiune cu corpul analizat. Deci ai nevoie de două așteptări.

Exemplu complet

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

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

Verifică dacă a reușit

fetch nu aruncă dacă serverul răspunde cu o stare de eroare (404, 500). Îți mai oferă un Response, dar cu ok: false:

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

fetch aruncă doar dacă rețeaua eșuează (fără conexiune, DNS, ...).

Solicitări multiple în paralel: Promise.all

Dacă trebuie să efectuați N apeluri independente, lansați-le împreună și așteptați-le pe toate cu Promise.all:

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

În serie cu două awaits consecutive ar dura aproape de două ori mai mult timp (suma); în paralel este maxim dintre cele două (cel mai lent).

Încearcă

Exercițiu de revizuire