Promesses JavaScript : les bases que vous devez connaître

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 figer le fil, nous rencontrons Promise, un outil puissant qui simplifie la programmation asynchrone. Avec Promesse, 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, j'ai pour objectif 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 les plats une fois prêts. 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 (réalisé 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 précis 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 utilisant .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(): Use this method to handle the resolved value of a Promise.
• catch(): Use this method to handle errors when a Promise is rejected.
• finally(): This method runs code after the Promise settles, regardless of the outcome, allowing for cleanup or final actions.

4. Promise Chaining

One of the most powerful features of Promises is their ability to be chained together, allowing you to perform multiple asynchronous operations in sequence. This means each operation waits for the previous one to complete before executing, which is particularly useful when tasks depend on each other.

Let's take a look at the following example:

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);
  });

In this example, the fetchUserData function returns a Promise that resolves with user information. The resolved value is then passed to the fetchPosts function, which returns another Promise. If any of these Promises are rejected, the error is caught in the final .catch() method, allowing for effective error handling throughout the chain.

Conclusion

In conclusion, Promises are a crucial part of modern JavaScript, enabling developers to handle asynchronous operations in a more structured and efficient way. By using Promises, you can:

• Simplify the management of asynchronous tasks and avoid callback hell.
• Chain multiple asynchronous operations to maintain a clear flow of execution.
• Effectively handle errors with a unified approach.

---

As you implement Promises in your own projects, you'll find that they not only improve code readability but also enhance the overall user experience by keeping your applications responsive. I hope that this journey through JavaScript's foundational concepts has provided valuable insights for developers. Happy coding!

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!