Introduction

JavaScript est un langage de programmation à thread unique, ce qui signifie qu'il ne peut exécuter qu'une seule tâche à la fois. Cela devient délicat avec les opérations asynchrones telles que la récupération de données ou la définition de minuteries, qui peuvent bloquer le flux d'exécution et ralentir votre application.

Pour gérer ces tâches asynchrones sans geler le thread, nous rencontrons Promise, un outil puissant qui simplifie la programmation asynchrone. Avec Promises, vous pouvez gérer plus efficacement les tâches de longue durée, écrire du code plus propre et plus lisible et éviter le redoutable « enfer des rappels. »

Dans cet article, mon objectif est de vous familiariser avec ce que sont les Promesses, comment elles fonctionnent et comment elles simplifient la programmation asynchrone.

Qu'est-ce qu'une promesse ?

Imaginez que vous commandez un repas dans un restaurant. Une fois votre commande passée, vous n'attendez plus à la cuisine que votre repas soit préparé. Au lieu de cela, vous continuez votre conversation ou profitez de l'ambiance pendant que la cuisine prépare votre repas en arrière-plan. Le restaurant promet de vous servir la nourriture une fois prête. Vous pouvez faire confiance à cette promesse car, à terme, l'une des deux choses suivantes se produira : soit votre repas arrivera (réalisé), soit la cuisine vous informera qu'elle ne peut pas terminer la commande (rejetée ).

En JavaScript, les Promesses fonctionnent de la même manière. Lorsque vous demandez à JavaScript de faire quelque chose qui prend du temps, comme récupérer des données sur un serveur, il renvoie une Promesse. Cette Promesse ne vous donne pas immédiatement le résultat. Au lieu de cela, il vous dit : « Je vous répondrai lorsque le travail sera terminé. » Pendant ce temps, le reste de votre code continue de s'exécuter. Une fois la tâche terminée, la Promesse est soit :

• Réalisé (la tâche a réussi), ou
• Rejeté (la tâche a échoué) et vous pouvez gérer le résultat en conséquence.

Comment fonctionnent les promesses en JavaScript

Une Promesse représente une valeur qui peut être disponible maintenant, dans le futur ou jamais. Il a trois états :

• En attente : la tâche est toujours en cours et le résultat final (exécuté ou rejeté) n'est pas encore déterminé.
• Réalisé : la tâche a été terminée avec succès et le résultat est disponible.
• Rejeté : la tâche a échoué et une erreur est disponible à gérer

1. Créer une promesse

Pour créer une Promise, vous utilisez le constructeur Promise, qui prend une fonction (appelée exécuteur) qui a deux paramètres : résoudre et rejeter. La fonction de résolution est appelée lorsque la Promesse est remplie, tandis que la fonction de rejet est appelée lorsqu'elle est rejetée.

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. Résoudre et rejeter les promesses

Une fois qu'une Promesse est créée, vous pouvez décider de son résultat en appelant soit résoudre soit rejeter :

• solve(value) : appelez cette fonction lorsque l’opération asynchrone se termine avec succès. Il transmet une valeur aux gestionnaires qui attendent que la promesse soit remplie.
• rejeter (erreur) : appelle cette fonction lorsque l’opération échoue. Il transmet un message d'erreur aux gestionnaires qui attendent que la promesse soit rejetée.

3. Consommer des promesses

Une fois que vous avez créé une Promesse, l'étape suivante consiste à la consommer. JavaScript fournit plusieurs méthodes pour gérer les résultats des promesses : .then(), .catch() et .finally(). Chacune de ces méthodes répond à un objectif spécifique et vous permet de gérer efficacement les résultats des opérations asynchrones.

• Gestion des promesses résolues avec .then() : la méthode .then() est utilisée pour spécifier ce qui doit se passer lorsqu'une Promesse est remplie. Il prend deux arguments facultatifs : un rappel pour la valeur résolue et un autre pour gérer les rejets.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• Gestion des rejets avec .catch() : la méthode .catch() est spécifiquement conçue pour gérer les erreurs qui se produisent lors de l'exécution de la Promesse. Cela en fait un moyen simple de gérer les refus.

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• Actions finales ou de nettoyage à l'aide de .finally() : la méthode .finally() vous permet d'exécuter du code une fois la Promesse réglée, qu'elle ait été remplie ou rejetée. Ceci est utile pour les actions ou tâches de nettoyage qui doivent s’exécuter à la fois dans des scénarios de réussite et d’échec.

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

Pour être concis :

• then() : utilisez cette méthode pour gérer la valeur résolue d'une promesse.
• catch() : utilisez cette méthode pour gérer les erreurs lorsqu'une promesse est rejetée.
• enfin () : cette méthode exécute le code une fois la promesse réglée, quel que soit le résultat, permettant le nettoyage ou les actions finales.

4. Enchaînement de promesses

L'une des fonctionnalités les plus puissantes de Promises est leur capacité à être enchaînées, vous permettant d'effectuer plusieurs opérations asynchrones en séquence. Cela signifie que chaque opération attend la fin de la précédente avant de s'exécuter, ce qui est particulièrement utile lorsque les tâches dépendent les unes des autres.

Regardons l'exemple suivant :

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

Dans cet exemple, la fonction fetchUserData renvoie une Promise qui se résout avec les informations utilisateur. La valeur résolue est ensuite transmise à la fonction fetchPosts, qui renvoie une autre Promise. Si l'une de ces promesses est rejetée, l'erreur est détectée dans la méthode finale .catch(), permettant une gestion efficace des erreurs tout au long de la chaîne.

Conclusion

En conclusion, les promesses sont un élément crucial du JavaScript moderne, permettant aux développeurs de gérer les opérations asynchrones de manière plus structurée et plus efficace. En utilisant les promesses, vous pouvez :

• Simplifiez la gestion des tâches asynchrones et évitez l'enfer des rappels.
• Enchaînez plusieurs opérations asynchrones pour maintenir un flux d'exécution clair.
• Gérez efficacement les erreurs avec une approche unifiée.

Au fur et à mesure que vous implémentez Promises dans vos propres projets, vous constaterez qu'elles améliorent non seulement la lisibilité du code, mais améliorent également l'expérience utilisateur globale en gardant vos applications réactives. J'espère que ce voyage à travers les concepts fondamentaux de JavaScript a fourni des informations précieuses aux développeurs. Bon codage !