18.4 Les promesses (Promise, then, catch, Promise.all)

Chapitre 18 — La programmation asynchrone · Leçon 4 : Les promesses (Promise, then, catch, Promise.all)

1. Qu'est-ce qu'une promesse ?

Une promesse (Promise) est un objet qui représente le résultat futur d'une opération asynchrone. Comme un ticket de retrait au pressing : vous l'obtenez tout de suite, et il vous permettra plus tard de récupérer votre vêtement… ou d'apprendre qu'il y a eu un problème.

Au lieu de donner un callback à la fonction (inversion de contrôle), c'est la fonction qui nous rend une promesse : nous gardons le contrôle de la suite.

Figure 4 — Les états d'une promesse et les méthodes qui y réagissent.

2. Créer et consommer une promesse

Le constructeur new Promise((resolve, reject) => { … }) reçoit une fonction exécutée immédiatement. On appelle resolve(valeur) en cas de succès, ou reject(erreur) en cas d'échec.

const promesse = new Promise((resolve, reject) => {
  const reussite = true; // essayez avec false
  setTimeout(() => {
    if (reussite) {
      resolve("Données reçues");
    } else {
      reject(new Error("Échec du chargement"));
    }
  }, 1000);
});

console.log("État juste après la création :", promesse);

promesse
  .then((valeur) => console.log("Succès :", valeur))
  .catch((erreur) => console.log("Erreur :", erreur.message))
  .finally(() => console.log("Terminé (succès ou échec)"));

Résultat dans la console

État juste après la création : Promise { <pending> }
Succès : Données reçues
Terminé (succès ou échec)

• .then(f): f reçoit la valeur quand la promesse est tenue ;
• .catch(f): f reçoit l'erreur quand elle est rejetée ;
• .finally(f): f s'exécute dans les deux cas (par exemple pour masquer un indicateur de chargement).

3. « Promisifier » une fonction à callback

On enveloppe l'ancienne fonction dans une promesse. Exemple classique : une version de setTimeout qui renvoie une promesse.

// Transformer setTimeout en promesse : « promisifier »
function attendre(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

console.log("Départ");
attendre(1000)
  .then(() => {
    console.log("1 seconde plus tard");
    return attendre(500); // on renvoie une promesse : le then suivant l'attend
  })
  .then(() => {
    console.log("1,5 seconde plus tard");
    return 42; // on renvoie une valeur simple
  })
  .then((nombre) => console.log("Valeur reçue :", nombre));

Résultat dans la console

Départ
1 seconde plus tard
1,5 seconde plus tard
Valeur reçue : 42

4. Fini le callback hell : le chaînage

Le même scénario qu'à la leçon 3 devient une chaîne plate, avec un seul catch pour toutes les étapes :

// Les fonctions de la leçon 3, réécrites pour RENVOYER une promesse
function chargerUtilisateur(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id <= 0) reject(new Error("Identifiant invalide"));
      else resolve({ id, nom: "Amina" });
    }, 300);
  });
}
function chargerCommandes(utilisateur) {
  return new Promise((resolve) =>
    setTimeout(() => resolve([{ ref: "C-101" }, { ref: "C-102" }]), 300));
}
function chargerDetails(commande) {
  return new Promise((resolve) =>
    setTimeout(() => resolve({ ref: commande.ref, articles: [12.5, 7, 30] }), 300));
}
function calculerTotal(details) {
  return new Promise((resolve) =>
    setTimeout(() => resolve(details.articles.reduce((s, p) => s + p, 0)), 300));
}

// Une chaîne plate, et UN SEUL catch pour toutes les étapes
chargerUtilisateur(1)
  .then((utilisateur) => chargerCommandes(utilisateur))
  .then((commandes) => chargerDetails(commandes[0]))
  .then((details) => calculerTotal(details))
  .then((total) => console.log("Total :", total, "DT"))
  .catch((err) => console.log("Erreur :", err.message));

// Avec un identifiant invalide, on saute directement au catch
chargerUtilisateur(-1)
  .then((utilisateur) => chargerCommandes(utilisateur))
  .then(() => console.log("Cette ligne ne s'affiche jamais"))
  .catch((err) => console.log("Erreur :", err.message));

Résultat dans la console

Erreur : Identifiant invalide
Total : 49.5 DT

L'erreur s'affiche en premier : la seconde chaîne échoue dès la première étape (300 ms), alors que la première chaîne a besoin de quatre étapes (1 200 ms).

5. Plusieurs promesses à la fois

Quand des opérations sont indépendantes, il est inutile de les attendre l'une après l'autre : on les lance ensemble.

function charger(nom, ms, echoue = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (echoue) reject(new Error(`${nom} indisponible`));
      else resolve(`${nom} OK`);
    }, ms);
  });
}

const debut = Date.now();
const duree = () => `${Math.round((Date.now() - debut) / 100) / 10} s`;

Promise.all([
  charger("Météo", 1000),
  charger("Actualités", 800),
  charger("Agenda", 1200),
])
  .then((resultats) => {
    console.log("Promise.all :", resultats, "en", duree());
  })
  .catch((err) => console.log("Promise.all a échoué :", err.message));

Résultat dans la console

Promise.all : [ 'Météo OK', 'Actualités OK', 'Agenda OK' ] en 1.2 s

Durée totale ≈ celle de la plus longue (1,2 s), et non la somme (3 s). Les résultats arrivent dans l'ordre du tableau, pas dans l'ordre de fin.

function charger(nom, ms, echoue = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (echoue) reject(new Error(`${nom} indisponible`));
      else resolve(`${nom} OK`);
    }, ms);
  });
}

// all : échoue dès qu'UNE promesse échoue
Promise.all([charger("A", 300), charger("B", 100, true), charger("C", 200)])
  .then((r) => console.log("all :", r))
  .catch((e) => console.log("all → erreur :", e.message));

// allSettled : attend TOUT et donne le bilan de chacune
Promise.allSettled([charger("A", 300), charger("B", 100, true)])
  .then((bilans) =>
    bilans.forEach((b) =>
      console.log("allSettled :", b.status, b.value ?? b.reason.message)));

// race : la PREMIÈRE réglée gagne (succès ou échec)
Promise.race([charger("Lent", 500), charger("Rapide", 150)])
  .then((r) => console.log("race :", r));

// any : la première RÉUSSIE gagne (ignore les échecs)
Promise.any([charger("X", 100, true), charger("Y", 400)])
  .then((r) => console.log("any :", r));

Résultat dans la console

all → erreur : B indisponible
race : Rapide OK
allSettled : fulfilled A OK
allSettled : rejected B indisponible
any : Y OK

6. Un cas réel : fetch

fetch renvoie une promesse. À tester dans la console du navigateur :

// À tester dans le navigateur (console F12) : fetch renvoie une promesse
fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((reponse) => {
    if (!reponse.ok) {
      throw new Error(`Erreur HTTP ${reponse.status}`); // fetch ne rejette PAS sur 404
    }
    return reponse.json(); // .json() renvoie aussi une promesse
  })
  .then((utilisateur) => console.log(utilisateur.name, "-", utilisateur.email))
  .catch((err) => console.log("Problème :", err.message));

← 18.3 — Les callbacks asynchrones et le « callback hell »18.5 — async et await →