Fetch and APIs

Qu'est-ce qu'une API ?

Une API (Application Programming Interface) est un moyen pour des programmes de communiquer entre eux. Quand votre site a besoin de données (météo, utilisateurs, produits), il les demande à un serveur via une API.

Dans notre métaphore du bâtiment : l'API, c'est le téléphone. Votre bâtiment appelle le fournisseur pour commander des matériaux, et le fournisseur répond avec ce qu'il a en stock.

Une requête API, c'est :

1. Vous envoyez une requête (demande) à une URL
2. Le serveur traite et envoie une réponse (souvent en JSON)
3. Vous utilisez les données dans votre page

fetch() : faire une requête

fetch() est la méthode JavaScript native pour appeler une API :

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data.name); // "Leanne Graham"
  });

fetch() retourne une Promise : un objet qui représente une opération qui va se terminer plus tard. .then() s'exécute quand la réponse arrive.

Au fait, c'est quoi une Promise ?

On en parle depuis le début sans ouvrir le capot. Une Promise est un objet qui représente un résultat pas encore disponible. Elle vit dans l'un de trois états :

• pending (en attente) : l'opération est en cours, on ne sait pas encore.
• fulfilled (réussie) : elle s'est terminée avec une valeur.
• rejected (échouée) : elle a échoué avec une erreur.

Une Promise démarre toujours pending, puis bascule une seule fois vers fulfilled ou rejected. Une fois fixée, elle ne change plus jamais.

Qui décide du basculement ? Quand on crée une Promise, on lui donne une fonction qui reçoit deux leviers : resolve et reject. On appelle resolve(valeur) quand ça réussit, reject(erreur) quand ça échoue :

const commande = new Promise((resolve, reject) => {
  const cafePret = true;
  if (cafePret) {
    resolve("café chaud");    // → la Promise devient "fulfilled"
  } else {
    reject("plus de grains");  // → la Promise devient "rejected"
  }
});

Et pour récupérer le résultat, deux styles équivalents :

// Style .then / .catch
commande
  .then(valeur => console.log("Reçu :", valeur))    // appelé si resolve()
  .catch(erreur => console.log("Raté :", erreur));  // appelé si reject()

// Style async / await (try/catch pour l'erreur)
try {
  const valeur = await commande;  // rend ce que resolve() a passé
} catch (erreur) {                // attrape ce que reject() a passé
  console.log("Raté :", erreur);
}

C'est exactement ce que fait fetch() en interne : il crée une Promise, appelle resolve quand la réponse du serveur arrive, et reject si le réseau tombe. Toi, tu te contentes de la consommer avec await ou .then().

async/await : la syntaxe moderne

async/await rend le code asynchrone lisible comme du code normal :

async function chargerUtilisateur() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const data = await response.json();
  console.log(data.name);
}

chargerUtilisateur();

await met le code en pause jusqu'à ce que la Promise soit résolue. async est obligatoire devant la fonction qui utilise await.

Une fonction async renvoie toujours une Promise

Voici le point qui surprend tout le monde : dès que tu mets async devant une fonction, elle renvoie une Promise, quoi que tu fasses à l'intérieur. Même un simple return 42 :

async function f() {
  return 42;
}

f();                  // Promise {<fulfilled>: 42}  ← pas 42 !
const x = await f();  // x = 42  (await déballe la Promise)

En fait, le mot async ne veut pas dire « ça tourne en arrière-plan ». Il veut dire : « cette fonction parle le langage des Promises ». Sa mission, c'est d'emballer automatiquement ta valeur de retour dans une Promise : ton return 42 devient, en coulisses, return Promise.resolve(42).

Et c'est le seul comportement sensé. Une fonction async a le droit de se mettre en pause (à chaque await) et de finir plus tard. Au moment où tu l'appelles, sa valeur finale n'existe peut-être pas encore (le serveur n'a pas répondu...). La seule chose honnête qu'elle peut te rendre tout de suite, c'est un bon de réception : une Promise, qui te livrera la valeur quand elle sera prête.

Les deux mots-clés sont donc les deux faces d'une même pièce : async produit une Promise, await déballe une Promise (et attend qu'elle soit prête). C'est pour ça qu'on écrit await f() pour récupérer le 42, et jamais f() tout seul.

JSON : le format des API

JSON (JavaScript Object Notation) est le format standard des API. C'est très similaire aux objets JavaScript :

// Objet JavaScript → texte JSON
const obj = { nom: "Alice", age: 25 };
const texte = JSON.stringify(obj); // '{"nom":"Alice","age":25}'

// Texte JSON → objet JavaScript
const obj2 = JSON.parse(texte); // { nom: "Alice", age: 25 }

Gestion des erreurs : try/catch

Les requêtes réseau peuvent échouer (pas d'internet, serveur en panne). Utilisez try/catch pour gérer les erreurs :

async function charger() {
  try {
    const response = await fetch("https://api.exemple.com/data");
    if (!response.ok) {
      throw new Error("Erreur HTTP : " + response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Problème :", error.message);
  }
}

Règle d'or : vérifiez toujours response.ok et entourez fetch de try/catch.