Fetch : parler HTTP depuis JavaScript

Objectifs

À la fin de cette leçon, vous saurez :

• interroger une API avec fetch ;
• lire la réponse : statut, en-têtes, corps JSON ;
• gérer les deux familles d'échecs (réseau et HTTP).

🔗 Pour vous rafraîchir la mémoire : en-têtes HTTP et JSON

La requête de base

fetch renvoie une Promise qui résout avec un objet Response :

const reponse = await fetch("https://api.exemple.fr/users");
console.log(reponse.status);          // 200
const utilisateurs = await reponse.json();   // parse le corps JSON

Deux await distincts, deux attentes différentes :

1. await fetch(...) → les en-têtes sont arrivés ;
2. await reponse.json() → le corps est lu et parsé.

Autres méthodes de lecture du corps : .text(), .blob() (fichiers), selon le Content-Type reçu.

POST avec corps JSON

const reponse = await fetch("https://api.exemple.fr/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Paul" }),
});

C'est le miroir exact des requêtes curl du chapitre HTTP : méthode, en-têtes, corps. Oublier Content-Type: application/json est l'erreur classique qui produit un 400 incompréhensible côté serveur.

fetch ne rejette pas sur 404 !

Point capital : une réponse 404 ou 500 est un fetch réussi — le serveur a répondu. Seule l'impossibilité d'atteindre le serveur rejette la Promise.

async function recupererUtilisateurs() {
  let reponse;
  try {
    reponse = await fetch("/api/users");
  } catch (erreur) {
    throw new Error("Serveur injoignable");        // échec réseau/DNS
  }
  if (!reponse.ok) {                                // ok = statut 2xx
    throw new Error(`Erreur HTTP ${reponse.status}`);
  }
  return reponse.json();
}

Le double filtrage est systématique : try/catch pour le transport, vérification de ok pour le protocole. C'est exactement la distinction erreur réseau / erreur HTTP vue au chapitre débogage.

Exercice

1. Interrogez https://api.github.com/users/octocat et affichez nom et nombre de dépôts publics.
2. Écrivez chargerJSON(url) qui encapsule le double contrôle (transport + statut).
3. Interrogez une URL inexistante du même domaine : quelle branche se déclenche ?
4. Interrogez un domaine inexistant : laquelle cette fois ?

Résumé

• fetch = Promise de Response ; corps lu séparément (.json/.text).
• POST = options method/headers/body avec JSON.stringify.
• Deux échecs à distinguer : transport (catch) et statut (!ok).