fetch (simulado)

En una página real, fetch(url) llama a un servidor. Aquí en el navegador de aprendizaje no podemos comunicarnos con servidores externos, por lo que usaremos un fetch "falso": en las pruebas se inyecta un globalThis.fetch que devuelve datos predefinidos, para que puedas practicar la lógica sin depender de la red.

La API que te interesa es exactamente la misma que la real:

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

fetch(url) devuelve una Promise que se resuelve en un objeto Response. Response.json() devuelve a su vez una Promise con el body procesado. Por lo tanto, se necesitan dos await.

Ejemplo completo

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

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

Comprobar si ha ido bien

fetch no lanza un error si el servidor responde con un estado de error (404, 500). Te da de todos modos una Response, pero con ok: false:

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

fetch solo lanza un error si la red falla (sin conexión, DNS, ...).

Múltiples solicitudes en paralelo: Promise.all

Si necesitas realizar N llamadas independientes, lánzalas juntas y espéralas todas con Promise.all:

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

En serie con dos await consecutivos tomaría casi el doble de tiempo (suma); en paralelo toma el tiempo de la más lenta (el máximo de las dos).

Pruébalo tú

Ejercicio de repaso