Utilisation de promesses en JavaScript

De temps en temps, nous publions des documents qui d'une manière ou d'une autre se rapportent à l'utilisation de promesses en JavaScript.


Pourquoi tant d'attention est-elle rivée aux promesses? Nous pensons que le fait est que cette technologie est très demandée et qu'elle est assez difficile à comprendre.

Par conséquent, si vous souhaitez mieux comprendre les promesses, nous vous proposons une traduction du prochain article sur ce sujet. Son auteur dit qu'il développe Java et PHP depuis 10 ans, mais pendant tout ce temps, il a étudié avec intérêt JavaScript. Récemment, il a décidé de s'engager sérieusement dans JS, et les promesses sont devenues le premier sujet qui l'intéressait.



Nous pensons que ce matériel sera intéressant pour les développeurs débutants qui estiment que, même s'ils utilisent des promesses, ils ne les comprennent pas assez bien. Il est possible que l'histoire de quelqu'un qui regarde JavaScript avec un nouveau regard et veut expliquer aux autres ce qu'il a lui-même compris, ne croyant pas que certaines choses soient compréhensibles par tout le monde et sans explication, aidera les débutants à maîtriser les mécanismes JavaScript.

JavaScript à travers les yeux d'un débutant

Quiconque commence à écrire en JavaScript peut ressentir ce qu'on appelle «hors de propos». Certains disent que JS est un langage de programmation synchrone, d'autres disent qu'il est asynchrone. Un débutant entend parler du code qui bloque le thread principal et du code qui ne le bloque pas, des modèles de conception basés sur des événements, du cycle de vie des événements, de la pile des appels de fonction, de la file d'attente des événements et de leur ascension, des polyfills. Il apprend qu'il existe des choses comme Babel, Angular, React, Vue et une myriade d'autres bibliothèques. Si vous venez de vous reconnaître dans un tel «novice», ne vous en faites pas. Vous n'êtes ni le premier ni le dernier. Il y a même un terme pour cela - la soi-disant «fatigue JavaScript». Lucas F Costa en a parlé avec justesse: "La fatigue JavaScript est quelque chose qui peut être observé lorsque les gens utilisent des outils dont ils n'ont pas besoin pour résoudre des problèmes qu'ils n'ont pas ."

Mais ne parlons pas de tristes choses. Ainsi, JavaScript est un langage de programmation synchrone qui, grâce au mécanisme de rappel, vous permet d'appeler des fonctions de la même manière que dans les langages asynchrones.

Une histoire simple sur les promesses

Le mot promesse se traduit par promesse. Les objets de promesse dans la programmation, que nous appelons «promesses», sont très similaires aux promesses habituelles que les gens se font dans la vraie vie. Parlons donc d'abord de ces promesses.

Sur Wikipédia, vous pouvez trouver la définition suivante du mot «promesse»: «obligation, consentement de quelqu'un à accomplir quelque chose ou, au contraire, à ne pas faire». Dans le dictionnaire d'Ozhegov, «promesse» est «un engagement volontaire de faire quelque chose».

Alors, que savons-nous des promesses?

1. Une promesse vous donne la garantie que quelque chose sera fait. Peu importe qui fait exactement cela: celui qui a fait la promesse, ou quelqu'un d'autre, à la demande de celui qui a fait la promesse. Une promesse donne confiance en quelque chose, sur la base de cette confiance, celui qui a reçu la promesse peut, par exemple, faire des plans.
2. Une promesse peut être tenue ou non.
3. Si la promesse est tenue, alors, par conséquent, vous vous attendez à quelque chose que vous pouvez utiliser à l'avenir pour effectuer des actions ou mettre en œuvre des plans.
4. Si la promesse n'est pas tenue, alors vous voudrez savoir pourquoi celui qui l'a donnée n'a pas pu la réaliser. Après avoir trouvé la raison de ce qui s'est passé et vous serez sûr que la promesse n'a pas été tenue, vous pouvez penser à ce qu'il faut faire ensuite, ou comment faire face à la situation.
5. Après qu'on vous ait promis quelque chose, tout ce que vous avez est une sorte de garantie. Vous ne pouvez pas profiter immédiatement de ce qui vous a été promis. Vous pouvez déterminer vous-même ce que vous devez faire si la promesse est remplie (par conséquent, vous recevrez la promesse), et ce que vous devez faire si elle s'avère être rompue (dans ce cas, vous connaissez la raison de ce qui s'est passé, et donc vous pouvez réfléchir à un plan de sauvegarde des actions )
6. Il est probable que la personne qui a fait la promesse disparaîtra tout simplement. Dans de tels cas, il est utile que la promesse soit liée à une sorte de délai. Par exemple, si celui qui vous a fait la promesse n'apparaît pas dans 10 jours, vous pouvez supposer qu'il a eu des problèmes et qu'il a rompu la promesse. Par conséquent, même si celui qui a fait la promesse la remplit en 15 jours, cela n'aura pas d'importance, alors vous agissez déjà sur le plan alternatif, sans compter sur la promesse.

Passez maintenant à JavaScript.

Promesses JavaScript

J'ai une règle: lorsque je fais du JavaScript, je lis toujours la documentation qui se trouve sur MDN. Il me semble que cette ressource se compare favorablement aux autres en termes de spécificité et de clarté de présentation. Par conséquent, tout en étudiant les promesses, je me suis familiarisé avec le matériel pertinent et j'ai expérimenté le code afin de m'habituer aux nouvelles constructions syntaxiques.

Afin de comprendre les promesses, vous devez faire face à deux choses principales. Le premier est la création de promesses. La seconde traite les résultats renvoyés par les promesses. Bien que la majeure partie du code que nous écrivons vise à travailler avec des promesses créées, par exemple, par certaines bibliothèques, une compréhension complète des mécanismes de travail des promesses sera sans aucun doute utile. De plus, pour un programmeur qui a déjà une certaine expérience, savoir comment créer des promesses est tout aussi important que de savoir comment travailler avec elles.

Créer des promesses

Voici comment les promesses sont créées:

new Promise( /* executor */ function(resolve, reject) { ... } ); 

Le constructeur accepte une fonction qui effectue certaines actions, nous l'avons appelée ici executor . Cette fonction prend deux paramètres - resolve et reject , qui, à leur tour, sont également des fonctions. Les promesses sont généralement utilisées pour effectuer des opérations asynchrones ou du code qui peut bloquer le thread principal, par exemple, celui qui fonctionne avec des fichiers, effectue des appels d'API, effectue des requêtes de base de données, traite les E / S, etc. Le démarrage de telles opérations asynchrones est effectué dans la fonction executor . Si l'opération asynchrone s'est terminée avec succès, le résultat attendu de la promesse sera renvoyé en appelant la fonction de resolve . La situation dans laquelle cette fonction est appelée est déterminée par le créateur de la promesse. De même, lorsqu'une erreur se produit, des informations sur ce qui s'est produit sont renvoyées en appelant la fonction de reject .

Maintenant que nous savons, en termes généraux, comment créer des promesses, nous allons créer une promesse simple afin de mieux comprendre tout.

 var keepsHisWord; keepsHisWord = true; promise1 = new Promise(function(resolve, reject) { if (keepsHisWord) {   resolve("The man likes to keep his word"); } else {   reject("The man doesnt want to keep his word"); } }); console.log(promise1); 

Voici ce que ce code affichera:


Promise a un état (PromiseStatus) et une valeur (PromiseValue)

Puisque notre promesse est instantanément résolue, nous ne pouvons pas enquêter sur son état initial. Par conséquent, créons une nouvelle promesse, qui, pour la résolution, a besoin de temps. Pour ce faire, la méthode la plus simple consiste à utiliser la fonction setTimeout .

 promise2 = new Promise(function(resolve, reject) { setTimeout(function() {   resolve({     message: "The man likes to keep his word",     code: "aManKeepsHisWord"   }); }, 10 * 1000); }); console.log(promise2); 

Dans ce code, une promesse est créée qui se résoudra certainement en 10 secondes. Cela nous donne l'occasion d'examiner l'état d'une promesse non autorisée.


Promesse non résolue

Après 10 secondes, la promesse sera résolue. Par conséquent, PromiseStatus et PromiseValue seront mis à jour en conséquence. Comme vous pouvez le voir, dans cet exemple, nous avons changé la fonction appelée lorsque la promesse a été résolue avec succès, maintenant elle retourne non pas une chaîne ordinaire, mais un objet. Cette opération est effectuée afin de démontrer la capacité de renvoyer des structures de données complexes à l'aide de la fonction de resolve .


Promesse résolue après 10 secondes et retour d'un objet

Examinons maintenant la promesse, que nous avons décidé de ne pas autoriser, mais de rejeter. Pour ce faire, nous modifions le code déjà utilisé dans le premier exemple.

 keepsHisWord = false; promise3 = new Promise(function(resolve, reject) { if (keepsHisWord) {   resolve("The man likes to keep his word"); } else {   reject("The man doesn't want to keep his word"); } }); console.log(promise3); 

Comme nous ne gérons pas la situation de rejet de la promesse, un message d'erreur sera affiché dans la console du navigateur (Google Chrome est utilisé ici). Nous en parlerons plus loin ci-dessous.


Promesse refusée

Maintenant, après avoir analysé les trois exemples, nous pouvons voir que trois valeurs différentes peuvent apparaître dans PromiseStatus : en pending (en attente), resolved (résolution réussie) et rejected (rejet). Lorsqu'une promesse est créée, dans PromiseStatus est en pending et dans PromiseValue n'est pas undefined . Ces valeurs resteront jusqu'à ce que la promesse soit résolue ou rejetée. Lorsqu'une promesse est dans un état resolved ou rejected , elle est appelée promesse settled . Une telle promesse est passée d'un état d'attente à un état dans lequel elle a soit un état resolved soit un état rejected .

Maintenant que nous avons appris comment les promesses sont créées, nous pouvons parler de la façon de traiter ce qu’elles retournent. Afin de comprendre cela, nous devons comprendre la structure de l'objet Promise .

Objet de promesse

Selon la documentation MDN, un objet Promise est le résultat de la réussite ou de l'échec d'une opération asynchrone.

L'objet Promise possède des méthodes statiques et des méthodes prototypes de l'objet. Les méthodes statiques peuvent être appelées sans créer d'instance de l'objet et pour appeler les méthodes de prototype, vous avez besoin d'une instance de l'objet Promise . N'oubliez pas que les méthodes statiques et régulières renvoient des objets Promise . Cela facilite le travail.

▍ Promettre des méthodes de prototypage d'objets

Parlons d'abord des méthodes prototypes de l'objet Promise . Il existe trois méthodes de ce type. N'oubliez pas que ces méthodes peuvent être appelées sur l'instance d'objet Promise et qu'elles renvoient elles-mêmes les promesses. Grâce à toutes ces méthodes, vous pouvez affecter des gestionnaires qui répondent aux changements de statut des promesses. Comme nous l'avons déjà vu, lorsqu'une promesse est créée, elle est en pending . Lorsqu'une promesse passe à un état resolved ou rejected , au moins l'une des méthodes suivantes sera appelée:

 Promise.prototype.catch(onRejected) Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.finally(onFinally) 

Voici un diagramme du fonctionnement de la promesse et des événements qui ont conduit à l'appel des .catch .then et .catch . Étant donné que ces méthodes retournent des objets Promise , leurs appels peuvent être chaînés, cela se reflète également dans le diagramme. Si la promesse utilise la méthode .finally , elle sera appelée lorsque la promesse passera à l'état settled , que la promesse ait été résolue ou rejetée avec succès.


Plan de travail Promis (image prise à partir d'ici )

Voici une petite histoire. Vous êtes étudiante et demandez à votre mère de vous acheter un téléphone portable. Elle dit: "Si nos économies sont supérieures au coût du téléphone, je l'achèterai pour vous." Racontez maintenant cette histoire en JavaScript.

 var momsPromise = new Promise(function(resolve, reject) { momsSavings = 20000; priceOfPhone = 60000; if (momsSavings > priceOfPhone) {   resolve({     brand: "iphone",     model: "6s"   }); } else {   reject("We donot have enough savings. Let us save some more money."); } }); momsPromise.then(function(value) { console.log("Hurray I got this phone as a gift ", JSON.stringify(value)); }); momsPromise.catch(function(reason) { console.log("Mom coudn't buy me the phone because ", reason); }); momsPromise.finally(function() { console.log(   "Irrespecitve of whether my mom can buy me a phone or not, I still love her" ); }); 

Voici ce que ce code affichera:


Maman n'a pas tenu sa promesse

Si nous modifions la valeur de la variable momsSavings à 200 000, alors maman pourra acheter un cadeau pour son fils. Dans ce cas, le code ci-dessus affichera les éléments suivants.


Maman a tenu une promesse

Imaginons maintenant que le code en question soit conçu comme une bibliothèque, et nous utilisons cette bibliothèque. Parlons de l'utilisation efficace des .catch .then et .catch .

Étant donné que la méthode .then peut être affectée à la fois au gestionnaire onFulfilled , qui est appelé lorsque la promesse est correctement résolue, et au gestionnaire onRejected , qui est appelé lorsque la promesse est rejetée, au lieu d'utiliser les .catch .then et .catch , nous pouvons obtenir le même effet avec une seule .then méthode. Voici à quoi cela pourrait ressembler:

 momsPromise.then( function(value) {   console.log("Hurray I got this phone as a gift ", JSON.stringify(value)); }, function(reason) {   console.log("Mom coudn't buy me the phone because ", reason); } ); 

Il s'agit d'un exemple de travail, mais afin d'éviter la lisibilité du code, il est préférable d'utiliser les méthodes .then et .catch au lieu d'un .then universel.

Pour que ces exemples soient exécutés dans un navigateur, et spécifiquement dans Google Chrome, j'ai essayé d'éviter les dépendances externes. Afin de mieux comprendre ce que nous considérerons plus tard, créons une fonction qui renvoie une promesse, dont la résolution ou le rejet se produit de manière aléatoire. Cela nous permettra de découvrir différents scénarios de travail avec des promesses. Afin de comprendre les caractéristiques des fonctions asynchrones, nous allons définir des retards aléatoires dans nos promesses. Puisque nous avons besoin de nombres aléatoires, nous créons une fonction qui renvoie un nombre aléatoire entre x et y . Voici la fonction.

 function getRandomNumber(start = 1, end = 10) { //,      start  end >=1  end > start return parseInt(Math.random() * end) % (end-start+1) + start; } 

Créez maintenant une fonction qui renvoie des promesses. promiseTRRARNOSG le promiseTRRARNOSG . Le nom de cette fonction signifie promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator , c'est-à-dire qu'il s'agit d'un générateur de promesses résolues ou rejetées de manière aléatoire après un nombre aléatoire de secondes. Cette fonction créera une promesse qui sera autorisée ou rejetée après une période de temps aléatoire entre 2 et 10 secondes. Afin d'autoriser ou de refuser au hasard une promesse, nous obtenons un nombre aléatoire compris entre 1 et 10. Si ce nombre est supérieur à 5, la promesse sera autorisée, sinon, elle sera rejetée.

 function getRandomNumber(start = 1, end = 10) { //,      start  end >=1  end > start return (parseInt(Math.random() * end) % (end - start + 1)) + start; } var promiseTRRARNOSG = (promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator = function() { return new Promise(function(resolve, reject) {   let randomNumberOfSeconds = getRandomNumber(2, 10);   setTimeout(function() {     let randomiseResolving = getRandomNumber(1, 10);     if (randomiseResolving > 5) {       resolve({         randomNumberOfSeconds: randomNumberOfSeconds,         randomiseResolving: randomiseResolving       });     } else {       reject({         randomNumberOfSeconds: randomNumberOfSeconds,         randomiseResolving: randomiseResolving       });     }   }, randomNumberOfSeconds * 1000); }); }); var testProimse = promiseTRRARNOSG(); testProimse.then(function(value) { console.log("Value when promise is resolved : ", value); }); testProimse.catch(function(reason) { console.log("Reason when promise is rejected : ", reason); }); //             ,    .     ,  - . for (i=1; i<=10; i++) { let promise = promiseTRRARNOSG(); promise.then(function(value) {   console.log("Value when promise is resolved : ", value); }); promise.catch(function(reason) {   console.log("Reason when promise is rejected : ", reason); }); } 

Exécutez ce code dans la console du navigateur pour voir comment les promesses autorisées et rejetées se comportent. Ensuite, nous verrons comment vous pouvez créer de nombreuses promesses et vérifier les résultats de leur mise en œuvre, en utilisant d'autres mécanismes.

MethodsMéthodes statiques d'un objet Promise

Il existe quatre méthodes statiques d'un objet Promise .

Voici deux méthodes - Promise.reject(reason) et Promise.resolve(value) , qui vous permettent de créer, respectivement, des promesses rejetées et autorisées.

Voici comment travailler avec la méthode Promise.reject , qui crée des promesses rejetées.

 var promise3 = Promise.reject("Not interested"); promise3.then(function(value){ console.log("This will not run as it is a rejected promise. The resolved value is ", value); }); promise3.catch(function(reason){ console.log("This run as it is a rejected promise. The reason is ", reason); }); 

Voici un exemple utilisant la méthode Promise.resolve qui crée des promesses résolues avec succès.

 var promise4 = Promise.resolve(1); promise4.then(function(value){ console.log("This will run as it is a resovled promise. The resolved value is ", value); }); promise4.catch(function(reason){ console.log("This will not run as it is a resolved promise", reason); }); 

Il convient de noter qu'une promesse peut avoir plusieurs gestionnaires. Par exemple, sur la base de l'exemple précédent, vous pouvez obtenir le code indiqué ci-dessous.

 var promise4 = Promise.resolve(1); promise4.then(function(value){ console.log("This will run as it is a resovled promise. The resolved value is ", value); }); promise4.then(function(value){ console.log("This will also run as multiple handlers can be added. Printing twice the resolved value which is ", value * 2); }); promise4.catch(function(reason){ console.log("This will not run as it is a resolved promise", reason); }); 

Voici ce qu'il affiche dans la console du navigateur:


Utiliser plusieurs .then lorsque vous travaillez avec Promise

Les deux méthodes suivantes, Promise.all et Promise.race , sont conçues pour fonctionner avec des ensembles de promesses. Si, pour résoudre un certain problème, il est nécessaire de traiter plusieurs promesses, il est plus pratique de placer ces promesses dans un tableau, puis d'effectuer avec elles les actions nécessaires. Afin de comprendre l'essence des méthodes considérées ici, nous ne pourrons pas utiliser notre fonction pratique promiseTRRARNOSG , car le résultat de son travail dépend trop de la volonté du cas. Il nous sera plus pratique d'utiliser quelque chose qui produit des promesses plus prévisibles, ce qui nous permettra de comprendre leur comportement. Par conséquent, nous allons créer deux nouvelles fonctions. L'un d'eux ( promiseTRSANSG ) créera des promesses qui sont résolues après n secondes, la seconde ( promiseTRJANSG ) - des promesses qui sont rejetées après n secondes.

 var promiseTRSANSG = (promiseThatResolvesAfterNSecondsGenerator = function( n = 0 ) { return new Promise(function(resolve, reject) {   setTimeout(function() {     resolve({       resolvedAfterNSeconds: n     });   }, n * 1000); }); }); var promiseTRJANSG = (promiseThatRejectsAfterNSecondsGenerator = function( n = 0 ) { return new Promise(function(resolve, reject) {   setTimeout(function() {     reject({       rejectedAfterNSeconds: n     });   }, n * 1000); }); }); 

Nous allons maintenant utiliser ces fonctions afin de comprendre les fonctionnalités de la méthode Promise.all .

▍ Méthode Promise.all

Dans la documentation MDN, vous pouvez découvrir que la Promise.all(iterable) renvoie une promesse qui sera résolue lorsque toutes les promesses passées en tant qu'argument iterable seront iterable , ou lorsque cet argument ne contient aucune promesse. Cette promesse sera rejetée si l'une des promesses transférées est rejetée.
Regardons quelques exemples.

Exemple n ° 1

Toutes les promesses seront autorisées ici. Ce scénario est le plus courant.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(promiseTRSANSG(1)); promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(2)); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.log("One of the promises failed with the following reason", reason); }); 

Voici ce que ce code affichera sur la console:


Toutes les promesses autorisées

Après avoir analysé les résultats de cet exemple, deux observations importantes peuvent être faites.

Premièrement, la troisième promesse, dont la résolution prend 2 secondes, est terminée avant la seconde, mais, comme le montre la sortie générée par le code, l'ordre des promesses dans le tableau est conservé.

Deuxièmement, le code contient un temporisateur qui est utilisé pour savoir combien de temps il faut pour exécuter l'instruction Promise.all .

Si les promesses étaient exécutées séquentiellement, le temps d'exécution de cette instruction serait de 7 secondes (1 + 4 + 2). Cependant, la minuterie nous informe que toute l'opération a pris 4 secondes si nous arrondissons le résultat. C'est la preuve que toutes les promesses sont exécutées en parallèle.

Exemple n ° 2

Considérez maintenant la situation où il n'y a aucune promesse dans le tableau passé à Promise.all. Je pense que c'est le cas d'utilisation le moins courant pour cette fonctionnalité.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(1); promisesArray.push(4); promisesArray.push(2); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.log("One of the promises failed with the following reason", reason); }); 

Voici la sortie que ce code va générer:


Appelez Promise.all et passez un tableau ne contenant aucune promesse à cette méthode

Puisqu'il n'y a aucune promesse dans le tableau, Promise.all presque instantanément.

Exemple n ° 3

Voyons maintenant ce qui se passe lorsque l'une des promesses passées à Promise.all est rejetée.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(promiseTRSANSG(1)); promisesArray.push(promiseTRSANSG(5)); promisesArray.push(promiseTRSANSG(3)); promisesArray.push(promiseTRJANSG(2)); promisesArray.push(promiseTRSANSG(4)); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.timeEnd("Promise.All"); console.log("One of the promises failed with the following reason ", reason); }); 

Comme vous pouvez le voir dans les résultats d'exécution de code ci-dessous, l'exécution de Promise.all s'arrête après la première promesse rejetée avec la sortie du message que cette promesse donne.


L'exécution s'arrête après la première promesse rejetée

▍ Méthode Promise.race

MDN signale que la Promise.race(iterable) renvoie une promesse autorisée ou rejetée avec une valeur ou un motif de rejet après que l'une des promesses transmises est respectivement autorisée ou rejetée.

Regardons des exemples de travail avec Promise.race .

Exemple n ° 1

Il montre ce qui se passe lorsque l'une des promesses passées à Promise.race est résolue avant tout le monde.

 console.time("Promise.race"); var promisesArray = []; promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(3)); promisesArray.push(promiseTRSANSG(2)); promisesArray.push(promiseTRJANSG(3)); promisesArray.push(promiseTRSANSG(4)); var promisesRace = Promise.race(promisesArray); promisesRace.then(function(values) { console.timeEnd("Promise.race"); console.log("The fasted promise resolved", values); }); promisesRace.catch(function(reason) { console.timeEnd("Promise.race"); console.log("The fastest promise rejected with the following reason ", reason); }); 

C'est ce qui arrive à la console après avoir exécuté cet exemple.


Promis, qui a résolu plus rapidement que tout le monde

Toutes les promesses ici sont réalisées en parallèle. La troisième promesse est résolue après 2 secondes. Dès que cela se produit, la promesse retournée par Promise.race est résolue.

Exemple n ° 2

Considérez maintenant la situation lorsque l'une des promesses passées à Promise.race est rejetée.

 console.time("Promise.race"); var promisesArray = []; promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(6)); promisesArray.push(promiseTRSANSG(5)); promisesArray.push(promiseTRJANSG(3)); promisesArray.push(promiseTRSANSG(4)); var promisesRace = Promise.race(promisesArray); promisesRace.then(function(values) { console.timeEnd("Promise.race"); console.log("The fasted promise resolved", values); }); promisesRace.catch(function(reason) { console.timeEnd("Promise.race"); console.log("The fastest promise rejected with the following reason ", reason); }); 

Après avoir exécuté cet exemple, les éléments suivants arriveront sur la console:


Promesse rejetée avant tout le monde

Les promesses ici, comme dans les exemples précédents, sont effectuées en parallèle. La quatrième promesse est rejetée après 3 secondes. Dès que cela se produit, la promesse retournée par Promise.race est rejetée.

Exemple général et expériences

J'ai rassemblé tous les exemples que nous avons considérés dans ce document en un seul endroit, ce qui facilitera leur expérimentation, pour explorer divers scénarios de travail avec des promesses. Ce code est conçu pour être exécuté dans un navigateur, donc ici nous n'utilisons aucun appel d'API, n'accédons pas aux opérations sur les fichiers et ne travaillons pas avec les bases de données. Bien que tout cela trouve une application dans le développement de projets réels, je pense que travailler avec ces mécanismes peut nous distraire de notre objectif principal - les promesses. Et l'utilisation de fonctions simples qui simulent des retards donne des résultats similaires et ne nous charge pas de détails supplémentaires.

En explorant ces exemples vous-même, vous pouvez expérimenter avec le code, avec les valeurs des variables et étudier différents scénarios d'utilisation des promesses. En particulier, vous pouvez utiliser une combinaison des promiseTRJANSG , promiseTRSANSG et promiseTRRARNOSG afin de simuler de nombreux scénarios d'utilisation des promesses, ce qui vous permet de mieux les comprendre. En outre, notez que l'utilisation de la commande console.time vous permet de connaître le temps requis pour exécuter un certain morceau de code et, par exemple, de savoir si les promesses sont exécutées en parallèle ou séquentiellement. Voici un lien vers la page gist avec le code. Et au fait, si vous le souhaitez, jetez un œil à la bibliothèque Bluebird , qui contient des méthodes intéressantes pour travailler avec des promesses.

Résumé

Je vous propose une liste de règles que j'adhère lorsque je travaille avec des promesses afin de les utiliser correctement.

1. Utilisez des promesses lorsque vous travaillez avec du code asynchrone ou bloquant.
2. Pour gérer la situation de résolution réussie d'une promesse, utilisez la méthode .then ; pour les cas où la promesse est rejetée, utilisez .catch .
3. Utilisez les .catch .then et .catch dans toutes les promesses.
4. - , , .finally .
5. , , , .
6. , .
7. Promise , , , .
8. Promise.all , .

, , , .

Chers lecteurs! , , ?