Comprendre les promesses et le chaînage de promesses en JavaScript

Qu'est-ce qu'une promesse ?

Une promesse en JavaScript est comme une « promesse » que vous faites de faire quelque chose dans le futur. C'est un objet qui représente l'achèvement (ou l'échec) éventuel d'une tâche asynchrone et sa valeur résultante. En termes simples, une promesse agit comme un espace réservé pour une valeur qui n'est pas encore disponible mais qui le sera dans le futur.

États promis

Les promesses peuvent exister dans l'un des trois états suivants :

1. En attente : l'état initial d'une promesse, où elle attend toujours la fin de la tâche asynchrone.
2. Réalisé : l'état dans lequel la promesse se termine avec succès et la valeur résultante est disponible.
3. Rejeté : l'état dans lequel la promesse échoue et une erreur est renvoyée à la place de la valeur attendue.

Comment fonctionne une promesse ?

Une promesse est créée à l'aide du constructeur Promise, qui prend deux paramètres : résoudre et rejeter, les deux sont des fonctions.

Si l'opération asynchrone réussit, vous appelez la fonction de résolution pour tenir la promesse.
Si quelque chose ne va pas, vous appelez la fonction de rejet pour indiquer que la promesse a été rejetée en raison d'une erreur.
Vous pouvez gérer le résultat d'une promesse en utilisant .then() pour le succès et .catch() pour la gestion des erreurs.

Exemple : Créer et consommer une promesse

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

La résolution (données) renverra les données réussies lorsque la promesse sera remplie.
Si quelque chose ne va pas, rejeter (erreur) générera une erreur qui pourra être gérée avec .catch().

Qu’est-ce que le chaînage de promesses ?

Le chaînage de promesses est le processus d'exécution d'une séquence de tâches asynchrones, les unes après les autres, à l'aide de promesses. Chaque méthode .then() de la chaîne s'exécute une fois la précédente exécutée.

Pourquoi utiliser le chaînage de promesses ?

Il vous permet d'écrire du code propre et lisible pour gérer plusieurs opérations asynchrones dans un ordre spécifique. Chaque .then() peut renvoyer une valeur qui est transmise au prochain .then() de la chaîne, vous permettant de gérer les tâches étape par étape.

Exemple : enchaîner plusieurs promesses

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });

Dans cet exemple :

La promesse commence par se résoudre avec 1 après 1 seconde.
Chaque .then() suivant reçoit le résultat du précédent, le double ou le triple et le transmet au .then() suivant.
Le résultat est enregistré étape par étape : 1, 2, 6.
Gestion des erreurs dans le chaînage
Vous pouvez détecter n'importe quelle erreur dans la chaîne Promise en utilisant .catch(). Si un .then() échoue, la chaîne s'arrête et l'erreur est transmise au bloc .catch().

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });

Principaux avantages des promesses

• Évite l'enfer des rappels : les promesses simplifient la gestion de plusieurs opérations asynchrones, ce qui autrement conduit à des rappels profondément imbriqués (également appelés l'enfer des rappels).
• Gestion des erreurs : vous pouvez gérer toutes les erreurs d'une chaîne avec un seul .catch() à la fin.
• Exécution séquentielle : le chaînage des promesses garantit que les tâches asynchrones sont exécutées dans l'ordre, ce qui facilite le raisonnement du code.

Conclusion

Les promesses sont un outil puissant en JavaScript pour gérer les tâches asynchrones. Avec Promise Chaining, vous pouvez gérer plusieurs opérations asynchrones de manière propre, lisible et séquentielle. En comprenant comment créer et utiliser des promesses, et en les enchaînant, vous serez sur la bonne voie pour maîtriser la programmation asynchrone en JavaScript !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!