Dans ce didacticiel, vous découvrirez les promesses JavaScript et le chaînage des promesses à l'aide d'exemples.
En JavaScript, une promesse est un bon moyen de gérer les opérations asynchrones . Il est utilisé pour savoir si l'opération asynchrone s'est terminée avec succès ou non.
Une promesse peut avoir l'un des trois états.
- En attente
- Rempli
- Rejeté
Une promesse commence dans un état en attente. Cela signifie que le processus n'est pas terminé. Si l'opération réussit, le processus se termine dans un état terminé. Et, si une erreur se produit, le processus se termine dans un état rejeté.
Par exemple, lorsque vous demandez des données au serveur en utilisant une promesse, elles seront dans un état en attente. Lorsque les données arrivent avec succès, elles seront dans un état rempli. Si une erreur se produit, elle sera dans un état rejeté.
Créez une promesse
Pour créer un objet de promesse, nous utilisons le Promise()constructeur.
let promise = new Promise(function(resolve, reject)( //do something ));
Le Promise()constructeur prend une fonction comme argument. La fonction accepte également deux fonctions resolve()et reject().
Si la promesse revient avec succès, la resolve()fonction est appelée. Et, si une erreur se produit, la reject()fonction est appelée.
Supposons que le programme ci-dessous soit un programme asynchrone. Ensuite, le programme peut être géré en utilisant une promesse.
Exemple 1: programme avec une promesse
const count = true; let countValue = new Promise(function (resolve, reject) ( if (count) ( resolve("There is a count value."); ) else ( reject("There is no count value"); ) )); console.log(countValue);
Production
Promesse (: "Il y a une valeur de comptage.")
Dans le programme ci-dessus, un Promiseobjet est créé qui prend deux fonctions: resolve()et reject(). resolve()est utilisé si le processus réussit et reject()est utilisé lorsqu'une erreur se produit dans la promesse.
La promesse est résolue si la valeur de count est vraie.
Fonctionnement de la promesse JavaScript
Chaînage de promesses JavaScript
Les promesses sont utiles lorsque vous devez gérer plusieurs tâches asynchrones l'une après l'autre. Pour cela, nous utilisons le chaînage des promesses.
Vous pouvez effectuer une opération après une promesse est résolue à l' aide des méthodes then(), catch()et finally().
Méthode JavaScript then ()
La then()méthode est utilisée avec le rappel lorsque la promesse est remplie ou résolue avec succès.
La syntaxe de la then()méthode est:
promiseObject.then(onFulfilled, onRejected);
Exemple 2: enchaîner la promesse avec then ()
// returns a promise let countValue = new Promise(function (resolve, reject) ( resolve('Promise resolved'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) .then( function successValue1() ( console.log('You can call multiple functions this way.'); ), );
Production
Promesse résolue Vous pouvez appeler plusieurs fonctions de cette façon.
Dans le programme ci-dessus, la then()méthode est utilisée pour enchaîner les fonctions à la promesse. La then()méthode est appelée lorsque la promesse est résolue avec succès.
Vous pouvez enchaîner plusieurs then()méthodes avec la promesse.
Méthode JavaScript catch ()
La catch()méthode est utilisée avec le rappel lorsque la promesse est rejetée ou si une erreur se produit. Par exemple,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) // executes if there is an error .catch( function errorValue(result) ( console.log(result); ) );
Production
Promesse rejetée
Dans le programme ci-dessus, la promesse est rejetée. Et la catch()méthode est utilisée avec une promesse de gérer l'erreur.
Fonctionnement du chaînage de promesses JavaScript
Promesse JavaScript contre rappel
Les promesses sont similaires aux fonctions de rappel en ce sens qu'elles peuvent toutes deux être utilisées pour gérer des tâches asynchrones.
Les fonctions de rappel JavaScript peuvent également être utilisées pour effectuer des tâches synchrones.
Leurs différences peuvent être résumées dans les points suivants:
Promesse JavaScript
- La syntaxe est conviviale et facile à lire.
- La gestion des erreurs est plus facile à gérer.
- Exemple:
api (). then (function (result) (return api2 ();)). then (function (result2) (return api3 ();)). then (function (result3) (// do work)). catch ( function (error) (// gérer toute erreur pouvant survenir avant ce point));
Rappel JavaScript
- La syntaxe est difficile à comprendre.
- La gestion des erreurs peut être difficile à gérer.
- Exemple:
api (fonction (résultat) (api2 (fonction (résultat2) (api3 (fonction (résultat3) (// fonctionne si (erreur) (// fait quelque chose) autre (// fait quelque chose)));));)) ;
Méthode JavaScript finally ()
You can also use the finally() method with promises. The finally() method gets executed when the promise is either resolved successfully or rejected. For example,
// returns a promise let countValue = new Promise(function (resolve, reject) ( // could be resolved or rejected resolve('Promise resolved'); )); // add other blocks of code countValue.finally( function greet() ( console.log('This code is executed.'); ) );
Output
This code is executed.
JavaScript Promise Methods
There are various methods available to the Promise object.
| Method | Description |
|---|---|
all(iterable) | Waits for all promises to be resolved or any one to be rejected |
allSettled(iterable) | Waits until all promises are either resolved or rejected |
any(iterable) | Returns the promise value as soon as any one of the promises is fulfilled |
race(iterable) | Wait until any of the promises is resolved or rejected |
reject(reason) | Returns a new Promise object that is rejected for the given reason |
resolve(value) | Returns a new Promise object that is resolved with the given value |
catch() | Appends the rejection handler callback |
then() | Appends the resolved handler callback |
finally() | Appends a handler to the promise |
To learn more about promises in detail, visit JavaScript Promises.
