fetch (simulated)

On a real page, fetch(url) calls a server. Here in the learning browser we cannot talk to external servers, so we will use a "fake" fetch: in the tests, a globalThis.fetch is injected that returns predefined data, so you can practice on the logic without depending on the network.

The API you care about is the same as the real one:

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

fetch(url) returns a Promise that resolves to a Response object. Response.json() returns in turn a Promise with the parsed body. So you need two awaits.

Complete example

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

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

Checking if it succeeded

fetch does not throw if the server responds with an error status (404, 500). It still gives you a Response, but with ok: false:

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

fetch only throws if the network fails (no connection, DNS, ...).

Multiple requests in parallel: Promise.all

If you need to make N independent calls, launch them together and wait for all of them with Promise.all:

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

Serially with two consecutive awaits it would take almost twice the time (sum); in parallel it is the maximum of the two (the slowest).

Try it

Review exercise