Comprendre les promesses JavaScript

Les promesses sont une fonctionnalité puissante de JavaScript qui simplifie la gestion des opérations asynchrones. Ils fournissent une façon plus propre et plus intuitive de travailler avec le code asynchrone, en évitant des problèmes comme "Hellback Hell". "

Qu'est-ce qu'une promesse?

a promesse est un objet qui représente l'achèvement (ou défaillance) éventuel d'une opération asynchrone et sa valeur résultante. Il vous permet d'écrire un code asynchrone plus gérable par les opérations de chaînage et de gérer efficacement les erreurs.

États d'une promesse

Une promesse a trois états:

• en attendant : l'état initial, ni réalisé ni rejeté.
• a accompli : l'opération 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 de l'é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. Ensuite ()

• a 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. Catch ()

• a utilisé pour gérer les refus de promesse.

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

3. Enfin ()

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

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

4. Promise.all ()

• résout quand toutes les promesses dans 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. promesse.AllsetTled ()

• attend toutes les promesses de s'installer (soit remplies ou 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 résout ou rejette.

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. Promise.Any ()

• résout dès que toutes les promesses sont tenues.
• rejette 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));

Promesses de chaînage

le voilier 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 capturé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é des promesses ici:

Conclusion

Les promesses JavaScript fournissent 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 de rappel. Commencez à pratiquer avec les méthodes et les exemples ci-dessus, et vous serez sur la bonne voie pour maîtriser le javascript asynchrone!