Promises en JavaScript

• Les Promises servent à gérer les opérations asynchrones en JavaScript, proposant une alternative aux callbacks traditionnels.
• Une Promise représente une valeur qui sera éventuellement disponible.

État des Promises

• Une Promise se trouve dans l'un des trois états suivants:
  • En attente (pending): L'état initial, ni résolue ni rejetée.
  • Résolue (fulfilled): L'opération asynchrone s'est terminée avec succès.
  • Rejetée (rejected): L'opération asynchrone a échoué.

Création d'une Promise

• Utiliser le constructeur Promise pour créer une Promise.
• Le constructeur Promise reçoit une fonction "executor" comme argument.
• La fonction executor prend deux arguments: resolve et reject, qui sont eux-mêmes des fonctions.
• La fonction resolve est appelée pour indiquer que l'opération a réussi.
• La fonction reject est appelée pour indiquer que l'opération a échoué.

Exemple de création d'une Promise

• Voici une Promise qui est résolue après un délai:

const maPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Succès!");
  }, 2000);
});

• Exemple d'une Promise qui est rejetée après un délai:

const maPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("Échec!");
  }, 2000);
});

Utilisation des Promises

• Les Promises fournissent une méthode then pour attacher des gestionnaires qui seront exécutés lorsque la Promise est résolue.
• La méthode then prend une fonction comme argument, qui sera appelée avec la valeur de résolution de la Promise.
• Les Promises fournissent une méthode catch pour attacher des gestionnaires qui seront exécutés lorsque la Promise est rejetée.
• La méthode catch prend une fonction comme argument, qui sera appelée avec la raison du rejet de la Promise.

Exemple d'utilisation de then et catch

maPromise
  .then((valeur) => {
    console.log("Résultat:", valeur); // Affiche "Résultat: Succès!" après 2 secondes
  })
  .catch((raison) => {
    console.error("Erreur:", raison); // Affiche "Erreur: Échec!" si la Promise est rejetée
  });

Chaînage des Promises

• Les Promises peuvent être chaînées, afin d'exécuter une série d'opérations asynchrones de manière séquentielle.
• Chaque appel à then retourne une nouvelle Promise, ce qui permet de chaîner les appels.
• Si une fonction dans un then retourne une Promise, le then suivant attendra que cette Promise soit résolue avant d'exécuter son gestionnaire.

Exemple de chaînage de Promises

const promesse1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(10);
  }, 1000);
});

promesse1
  .then((valeur) => {
    console.log("Première valeur:", valeur); // Affiche "Première valeur: 10" après 1 seconde
    return valeur * 2;
  })
  .then((valeur) => {
    console.log("Deuxième valeur:", valeur); // Affiche "Deuxième valeur: 20" après 1 seconde
    return valeur + 5;
  })
  .then((valeur) => {
    console.log("Troisième valeur:", valeur); // Affiche "Troisième valeur: 25" après 1 seconde
  });

Gestion des erreurs dans les chaînes de Promises

• Il est important de gérer les erreurs dans les chaînes de Promises pour éviter que les erreurs ne soient pas détectées.
• Une méthode catch peut être ajoutée à la fin de la chaîne pour capturer toutes les erreurs qui se produisent dans les Promises précédentes.
• Si une erreur se produit dans un then, elle sera transmise au catch le plus proche dans la chaîne.

Exemple de gestion des erreurs

const promesseQuiPeutEchouer = new Promise((resolve, reject) => {
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve("Succès!");
    } else {
      reject("Échec!");
    }
  }, 1000);
});

promesseQuiPeutEchouer
  .then((valeur) => {
    console.log("Valeur:", valeur);
    return valeur.toUpperCase();
  })
  .then((valeur) => {
    console.log("Valeur en majuscules:", valeur);
  })
  .catch((erreur) => {
    console.error("Erreur:", erreur); // Capture l'erreur si la Promise est rejetée ou si une erreur se produit dans un `then`
  });

Méthodes statiques des Promises

• Promise.all(iterable): Prend un iterable de Promises en entrée et retourne une seule Promise qui se résout lorsque toutes les Promises de l'iterable sont résolues. Elle est rejetée si au moins une des Promises est rejetée.
• Promise.race(iterable): Prend un iterable de Promises en entrée et retourne une Promise qui se résout ou se rejette dès que la première Promise de l'iterable est résolue ou rejetée.
• Promise.resolve(valeur): Retourne une Promise qui est résolue avec la valeur donnée.
• Promise.reject(raison): Retourne une Promise qui est rejetée avec la raison donnée.

Exemple d'utilisation de Promise.all

const promesse1 = Promise.resolve(1);
const promesse2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));
const promesse3 = Promise.resolve(3);

Promise.all([promesse1, promesse2, promesse3])
  .then((valeurs) => {
    console.log("Valeurs:", valeurs); // Affiche "Valeurs: [1, 2, 3]" après 1 seconde
  })
  .catch((erreur) => {
    console.error("Erreur:", erreur);
  });

Exemple d'utilisation de Promise.race

const promesseRapide = new Promise((resolve) => setTimeout(() => resolve("Rapide!"), 500));
const promesseLente = new Promise((resolve) => setTimeout(() => resolve("Lent!"), 1000));

Promise.race([promesseRapide, promesseLente])
  .then((valeur) => {
    console.log("Valeur:", valeur); // Affiche "Valeur: Rapide!" après 0.5 seconde
  })
  .catch((erreur) => {
    console.error("Erreur:", erreur);
  });

Avantages des Promises

• Améliorent la lisibilité du code asynchrone par rapport aux callbacks.
• Facilitent la gestion des erreurs.
• Permettent le chaînage des opérations asynchrones.
• Fournissent des méthodes statiques utiles pour gérer plusieurs Promises simultanément.

Alternatives aux Promises

• Async/Await: Une syntaxe plus récente et plus concise pour travailler avec les opérations asynchrones, basée sur les Promises.
• Callbacks: La méthode traditionnelle pour gérer les opérations asynchrones en JavaScript, mais peut conduire au "callback hell" si elle est mal gérée.
• Observables (RxJS): Un modèle plus puissant et flexible pour gérer les flux de données asynchrones.

Async/Await

• async et await sont des mots-clés qui simplifient l'utilisation des Promises.
• async est utilisé pour définir une fonction asynchrone.
• await est utilisé à l'intérieur d'une fonction async pour attendre la résolution d'une Promise.
• L'utilisation de async/await rend le code asynchrone plus lisible et plus facile à comprendre.

Exemple d'utilisation d'async/await

async function exempleAsync() {
  try {
    const resultat = await maPromise;
    console.log("Résultat:", resultat);
    const resultatMajuscule = await Promise.resolve(resultat.toUpperCase());
    console.log("Résultat en majuscules:", resultatMajuscule);
  } catch (erreur) {
    console.error("Erreur:", erreur);
  }
}

exempleAsync();

Différences entre Promises et Callbacks

• Les Promises offrent une meilleure gestion des erreurs grâce à la méthode catch.
• Les Promises évitent le "callback hell" en permettant le chaînage des opérations asynchrones.
• Les Promises sont plus faciles à lire et à maintenir que les callbacks, surtout dans les opérations asynchrones complexes.

Bonnes pratiques pour l'utilisation des Promises

• Toujours gérer les erreurs en utilisant catch.
• Éviter d'imbriquer les Promises autant que possible. Utiliser le chaînage ou async/await pour une meilleure lisibilité.
• Utiliser Promise.all pour exécuter plusieurs opérations asynchrones en parallèle lorsque l'ordre n'est pas important.
• Choisir la syntaxe async/await pour un code plus propre et plus facile à comprendre.
• Documenter clairement le comportement asynchrone du code.