fetch (simulé)

Sur une vraie page, fetch(url) appelle un serveur. Ici, dans le navigateur d'apprentissage, nous ne pouvons pas communiquer avec des serveurs externes, nous utiliserons donc un « faux » fetch : dans les tests, un globalThis.fetch est injecté pour renvoyer des données prédéfinies, ce qui vous permet de vous exercer sur la logique sans dépendre du réseau.

L'API qui vous intéresse est exactement la même que l'API réelle :

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

fetch(url) retourne une Promise qui se résout en un objet Response. Response.json() retourne à son tour une Promise contenant le corps décodé. Il faut donc deux await.

Exemple complet

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

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

Vérifier si tout s'est bien passé

fetch ne lève pas d'erreur si le serveur répond par un code d'erreur (404, 500). Il vous renvoie tout de même une Response, mais avec ok: false :

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

fetch ne lève une erreur que si le réseau échoue (pas de connexion, problème DNS, ...).

Plusieurs requêtes en parallèle : Promise.all

Si vous devez effectuer N appels indépendants, lancez-les ensemble et attendez-les tous avec Promise.all :

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

En série avec deux await consécutifs, cela prendrait presque le double du temps (somme) ; en parallèle, cela prend le temps du plus long (le maximum des deux).

À vous de jouer

Exercice de révision