Promises

Un concept difficile à comprendre au début pour beaucoup de développeurs : les Promises.

Les Promises ont été introduites pour faciliter le traitement des opérations asynchrones en JavaScript. Elles résolvent le problème des callbacks souvent profondément imbriqués, difficiles à lire et à maintenir. Les Promises offrent une façon plus propre et plus simple d'exécuter et de gérer des opérations asynchrones.

Mais comment fonctionnent exactement les Promises ? Une Promise est en gros un objet qui exécute une opération de façon asynchrone et renvoie soit une valeur, soit une erreur. Une Promise peut se trouver dans l'un de ces trois états :

1. Pending : l'état initial de la Promise lorsqu'elle vient d'être créée.

1. Fulfilled : l'état dans lequel la Promise s'est terminée avec succès et a renvoyé une valeur.

1. Rejected : l'état dans lequel la Promise a levé une erreur.

Expliquons cela avec un exemple :

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() >= 0.5) {
      resolve("Success!");
    } else {
      reject("Error!");
    }
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

Dans cet exemple, nous créons une Promise qui renvoie après une seconde soit « Success! », soit « Error! », selon qu'un nombre aléatoire est supérieur ou inférieur à 0,5. Nous appelons ensuite la Promise avec la méthode « then » pour traiter le succès, ou avec la méthode « catch » pour traiter l'erreur.

Les Promises peuvent aussi être chaînées pour exécuter des opérations asynchrones complexes. L'exemple suivant montre comment chaîner des Promises pour exécuter une tâche asynchrone en plusieurs étapes :

function stepOne() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step One Complete");
      resolve();
    }, 1000);
  });
}

function stepTwo() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step Two Complete");
      resolve();
    }, 1000);
  });
}

function stepThree() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step Three Complete");
      resolve();
    }, 1000);
  });
}

stepOne()
  .then(() => stepTwo())
  .then(() => stepThree())
  .then(() => console.log("All Steps Complete"));

Dans cet exemple, nous avons défini trois fonctions qui exécutent chacune une opération asynchrone et renvoient une Promise une fois terminées. Nous les appelons ensuite l'une après l'autre en les chaînant avec la méthode « then », pour garantir que chaque étape ne s'exécute qu'une fois la précédente terminée.