Maison >interface Web >js tutoriel >Promesses en JavaScript : le guide ultime pour les débutants
JavaScript est un langage de programmation polyvalent principalement utilisé pour le développement Web. L'une des fonctionnalités les plus puissantes de JavaScript est sa capacité à gérer des opérations asynchrones. C’est là qu’interviennent les promesses, permettant aux développeurs de gérer plus efficacement le code asynchrone. Ce guide vous présentera les bases des promesses, en vous fournissant des connaissances approfondies et des exemples pratiques pour vous aider à les comprendre et à les utiliser efficacement.
Heading | Subtopics |
---|---|
What is a Promise in JavaScript? | Definition, State of a Promise, Basic Syntax |
Creating a Promise | Example, Resolving, Rejecting |
Chaining Promises | then(), catch(), finally() |
Handling Errors | Common Pitfalls, Error Handling Techniques |
Promise.all() | Usage, Examples, Handling Multiple Promises |
Promise.race() | Usage, Examples, First Settled Promise |
Promise.any() | Usage, Examples, First Fulfilled Promise |
Promise.allSettled() | Usage, Examples, When All Promises Settle |
Async/Await | Syntax, Combining with Promises, Examples |
Real-World Examples | Fetch API, Async File Reading |
Common Mistakes | Anti-Patterns, Best Practices |
Advanced Promise Concepts | Custom Promises, Promise Combinators |
FAQs | Answering Common Questions |
Conclusion | Summary, Final Thoughts |
Une promesse en JavaScript est un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone. Il vous permet d'associer des gestionnaires à la valeur de réussite éventuelle ou à la raison de l'échec d'une action asynchrone. Cela permet aux méthodes asynchrones de renvoyer des valeurs comme les méthodes synchrones : au lieu de renvoyer immédiatement la valeur finale, la méthode asynchrone renvoie une promesse de fournir la valeur à un moment donné dans le futur.
Une promesse peut être dans l'un des trois états suivants :
let promise = new Promise(function(resolve, reject) { // Asynchronous operation let success = true; if(success) { resolve("Operation successful!"); } else { reject("Operation failed!"); } });
Créer une promesse implique d'instancier un nouvel objet Promise et de lui passer une fonction. Cette fonction prend deux paramètres : résoudre et rejeter.
let myPromise = new Promise((resolve, reject) => { let condition = true; if(condition) { resolve("Promise resolved successfully!"); } else { reject("Promise rejected."); } }); myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });
Dans cet exemple, myPromise sera résolue avec succès et enregistrera « Promesse résolue avec succès ! » à la console.
L'une des caractéristiques puissantes des promesses est la possibilité de les enchaîner. Cela vous permet d'effectuer une séquence d'opérations asynchrones de manière lisible et maintenable.
La méthode then() est utilisée pour gérer la réalisation d'une promesse.
myPromise.then((message) => { console.log(message); return "Next step"; }).then((nextMessage) => { console.log(nextMessage); });
La méthode catch() est utilisée pour gérer le rejet d'une promesse.
myPromise.then((message) => { console.log(message); }).catch((error) => { console.log(error); });
La méthode enfin() est utilisée pour exécuter du code, que la promesse ait été remplie ou rejetée.
myPromise.finally(() => { console.log("Promise is settled (either fulfilled or rejected)."); });
La gestion des erreurs dans les promesses est cruciale pour un code robuste.
myPromise.then((message) => { console.log(message); throw new Error("Something went wrong!"); }).catch((error) => { console.error(error.message); });
Promise.all() prend un tableau de promesses et renvoie une seule promesse qui se résout lorsque toutes les promesses du tableau sont résolues, ou qui est rejetée si l'une des promesses est rejetée.
let promise1 = Promise.resolve(3); let promise2 = 42; let promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values); // [3, 42, "foo"] });
Promise.race() renvoie une promesse qui se résout ou se rejette dès que l'une des promesses du tableau est résolue ou rejetée.
let promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); }); let promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then((value) => { console.log(value); // "two" });
Promise.any() renvoie une promesse qui se résout dès que l'une des promesses du tableau se réalise, ou la rejette si toutes les promesses sont rejetées.
let promise1 = Promise.reject("Error 1"); let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success")); let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success")); Promise.any([promise1, promise2, promise3]).then((value) => { console.log(value); // "Success" }).catch((error) => { console.log(error); });
Promise.allSettled() renvoie une promesse qui se résout une fois que toutes les promesses données ont été résolues ou rejetées, avec un tableau d'objets qui décrivent chacun le résultat de chaque promesse.
let promise1 = Promise.resolve("Resolved"); let promise2 = Promise.reject("Rejected"); Promise.allSettled([promise1, promise2]).then((results) => { results.forEach((result) => console.log(result.status)); });
Les mots-clés async et wait vous permettent de travailler avec les promesses de manière plus synchrone.
async function myFunction() { let myPromise = new Promise((resolve, reject) => { setTimeout(() => resolve("Done!"), 1000); }); let result = await myPromise; // Wait until the promise resolves console.log(result); // "Done!" } myFunction();
async function fetchData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.error("Error fetching data: ", error); } } fetchData();
L'API Fetch est un cas d'utilisation courant pour les promesses.
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Utiliser des promesses pour lire des fichiers dans Node.js.
const fs = require('fs').promises; async function readFile() { try { let content = await fs.readFile('example.txt', 'utf-8'); console.log(content); } catch (error) { console.error('Error reading file:', error); } } readFile();
Vous pouvez créer des promesses personnalisées pour gérer des opérations asynchrones spécifiques.
function customPromiseOperation() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Custom operation complete!"); }, 2000); }); } customPromiseOperation().then((message) => { console.log(message); });
Combinez plusieurs promesses à l'aide de combinateurs comme Promise.all(), Promise.race(), etc., pour gérer des flux asynchrones complexes.
Comment les promesses aident-elles avec la programmation asynchrone ?
Les promesses offrent un moyen plus propre et plus lisible de gérer les opérations asynchrones par rapport aux rappels traditionnels, réduisant ainsi le risque de « l'enfer des rappels ».
Quelle est la différence entre then() et `
attraper() ?
then() est utilisé pour gérer les promesses résolues, tandis que catch()` est utilisé pour gérer les promesses rejetées.
Pouvez-vous utiliser des promesses avec un code JavaScript plus ancien ?
Oui, les promesses peuvent être utilisées avec du code JavaScript plus ancien, mais pour une compatibilité totale, vous devrez peut-être utiliser un polyfill.
Quel est l'avantage d'utiliser Promise.all() ?
Promise.all() vous permet d'exécuter plusieurs promesses en parallèle et d'attendre qu'elles se terminent toutes, ce qui facilite la gestion de plusieurs opérations asynchrones.
Comment async/await améliore-t-il la gestion des promesses ?
La syntaxe async/await donne au code asynchrone une apparence et un comportement plus semblables à ceux d'un code synchrone, améliorant ainsi la lisibilité et la maintenabilité.
Que se passe-t-il si une promesse n'est ni résolue ni rejetée ?
Si une promesse n’est ni résolue ni rejetée, elle reste indéfiniment en attente. Il est important de s'assurer que toutes les promesses seront finalement résolues ou rejetées pour éviter des problèmes potentiels.
Les promesses sont un élément fondamental du JavaScript moderne, permettant aux développeurs de gérer les opérations asynchrones de manière plus efficace et plus lisible. En maîtrisant les promesses, vous pouvez écrire un code plus propre et plus maintenable qui gère efficacement les complexités de la programmation asynchrone. Que vous récupériez des données à partir d'une API, lisiez des fichiers ou effectuiez des tâches asynchrones personnalisées, comprendre les promesses est essentiel pour tout développeur JavaScript.
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!