Pumble en JavaScript

Comprendre les promesses JavaScript

Les promesses sont une fonctionnalité puissante de JavaScript qui simplifie la gestion des opérations asynchrones. Ils offrent une manière plus propre et plus intuitive de travailler avec du code asynchrone, évitant ainsi des problèmes tels que « l'enfer des rappels ».

---

Qu'est-ce qu'une promesse ?

Une Promesse est un objet qui représente l'achèvement (ou l'échec) éventuel d'une opération asynchrone et sa valeur résultante. Il vous permet d'écrire du code asynchrone plus gérable en enchaînant les opérations et en gérant efficacement les erreurs.

États d'une promesse

Une promesse a trois états :

• En attente : L'état initial, ni rempli ni rejeté.
• Réalisé : L'opération s'est terminée avec succès et la promesse a une valeur résultante.
• Rejeté : l'opération a échoué et la promesse a une raison d'échec (généralement une erreur).

Exemple:

const promise = new Promise((resolve, reject) => {
  let success = true; // Change to false to simulate rejection

  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Operation failed.");
  }
});

promise
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

---

Méthodes de promesse

1. alors()

• Utilisé pour gérer l'accomplissement d'une promesse.
• Renvoie une autre promesse, permettant le chaînage.

promise
  .then((result) => {
    console.log(result);
    return "Next Step";
  })
  .then((nextResult) => console.log(nextResult));

2. attraper()

• Utilisé pour gérer les rejets de promesses.

promise.catch((error) => console.error(error));

3. enfin()

• Utilisé pour exécuter un morceau de code quel que soit le résultat de la promesse.

promise.finally(() => console.log("Cleanup actions."));

4. Promesse.all()

• Résout lorsque toutes les promesses d'un tableau sont résolues.
• Rejette immédiatement si une promesse est rejetée.

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);

Promise.all([promise1, promise2]).then((results) => console.log(results));

5. Promise.allSettled()

• Attend que toutes les promesses soient réglées (soit remplies, soit rejetées).

const promise1 = Promise.resolve("Success");
const promise2 = Promise.reject("Error");

Promise.allSettled([promise1, promise2]).then((results) => console.log(results));

6. Promesse.race()

• Résout ou rejette dès que l'une des promesses est résolue ou rejetée.

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, "One"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Two"));

Promise.race([promise1, promise2]).then((result) => console.log(result));

7. Promesse.any()

• Résout dès que l'une des promesses est remplie.
• Rejete si toutes les promesses sont rejetées.

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.resolve("Success");
const promise3 = Promise.reject("Error 2");

Promise.any([promise1, promise2, promise3]).then((result) => console.log(result));

---

Enchaîner les promesses

Le chaînage permet de gérer plusieurs opérations asynchrones en séquence.

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    return fetch("https://api.example.com/other-data");
  })
  .then((otherResponse) => otherResponse.json())
  .then((otherData) => console.log(otherData))
  .catch((error) => console.error("Error:", error));

---

Gestion des erreurs dans les promesses

Les erreurs se propagent à travers la chaîne de promesses jusqu'à ce qu'elles soient détectées par un bloc catch().

fetch("https://api.example.com/data")
  .then((response) => {
    if (!response.ok) throw new Error("Network response was not ok");
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

---

Exemple de cas d'utilisation réel

Vous pouvez explorer un cas d'utilisation réel détaillé de Promises ici :

<script></script>

---

Conclusion

Les promesses JavaScript offrent un moyen robuste de gérer les opérations asynchrones avec clarté et efficacité. En maîtrisant les promesses, vous pouvez écrire un code plus propre et plus maintenable et éviter les pièges comme l'enfer des rappels. Commencez à vous entraîner avec les méthodes et les exemples ci-dessus et vous serez sur la bonne voie pour maîtriser le JavaScript asynchrone !

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!