Les promesses sont un sujet brûlant Cercles de développement JavaScript , et vous devez absolument vous familiariser avec eux. Ils ne sont pas faciles à comprendre; cela peut prendre quelques tutoriels, exemples et une quantité décente de pratique pour les comprendre.
Mon objectif avec ce didacticiel est de vous aider à comprendre les promesses JavaScript et de vous inciter à vous entraîner à les utiliser davantage. J'expliquerai ce que sont les promesses, quels problèmes elles résolvent et comment elles fonctionnent. Chaque étape, décrite dans cet article, est accompagnée d'un jsbin exemple de code pour vous aider à travailler et à utiliser comme base pour une exploration plus approfondie.
requête média de conception de sites Web réactifs
Qu'est-ce qu'une promesse JavaScript?
Une promesse est une méthode qui produit finalement une valeur. Il peut être considéré comme l'équivalent asynchrone d'une fonction getter. Son essence peut être expliquée par:
promise.then(function(value) { // Do something with the 'value' }); Les promesses peuvent remplacer l'utilisation asynchrone des rappels, et elles offrent plusieurs avantages par rapport à eux. Ils commencent à gagner du terrain à mesure que de plus en plus de bibliothèques et de frameworks les adoptent comme leur principal moyen de gérer l'asynchronicité. Ember.js est un excellent exemple d'un tel cadre.
Il y a plusieurs bibliothèques qui mettent en œuvre la spécification Promises / A + . Nous allons apprendre le vocabulaire de base et travailler sur quelques exemples de promesses JavaScript pour présenter les concepts qui les sous-tendent de manière pratique. J'utiliserai l'une des bibliothèques de mise en œuvre les plus populaires, rsvp.js , dans les exemples de code.
Préparez-vous, nous lancerons beaucoup de dés!
Obtenir la bibliothèque rsvp.js
Les promesses, et donc rsvp.js, peuvent être utilisées à la fois sur le serveur et côté client. Pour l'installer pour nodejs , allez dans votre dossier de projet et tapez:
npm install --save rsvp Si vous travaillez sur le front-end et utilisez bower, c'est juste un
bower install -S rsvp un moyen.
Si vous voulez juste entrer dans le jeu, vous pouvez l'inclure via une simple balise de script (et avec jsbin, vous pouvez l'ajouter via le menu déroulant 'Ajouter une bibliothèque'):
fulfillQuelles sont les propriétés d'une promesse?
Une promesse peut être dans l'un des trois états suivants: en attente , rempli , ou rejeté . Une fois créée, la promesse est en attente. De là, il peut passer à l'état rempli ou rejeté. Nous appelons cette transition le résolution de la promesse . L'état résolu d'une promesse est son état final, donc une fois qu'elle est remplie ou rejetée, elle y reste.
La façon de créer une promesse dans rsvp.js est via ce qu'on appelle un constructeur révélateur . Ce type de constructeur prend un seul paramètre de fonction et l'appelle immédiatement avec deux arguments, reject et fulfilled, qui peut faire passer la promesse soit au rejected ou le var promise = new RSVP.Promise(function(fulfill, reject) { (...) }); Etat:
thenCe modèle de promesses JavaScript est appelé un constructeur révélateur car l'argument de fonction unique révèle ses capacités à la fonction constructeur, mais garantit que les consommateurs de la promesse ne peuvent pas manipuler son état.
Les consommateurs de la promesse peuvent réagir aux changements d'état en ajoutant leur gestionnaire via le promise.then(onFulfilled, onRejected); méthode. Il faut une fonction d'exécution et une fonction de gestionnaire de rejet, qui peuvent toutes deux être manquantes.
surmonter les barrières de la communication interculturelle
onFulfilledSelon le résultat du processus de résolution de la promesse, soit le onRejected ou le function dieToss() { return Math.floor(Math.random() * 6) + 1; } console.log('1'); var promise = new RSVP.Promise(function(fulfill, reject) { var n = dieToss(); if (n === 6) { fulfill(n); } else { reject(n); } console.log('2'); }); promise.then(function(toss) { console.log('Yay, threw a ' + toss + '.'); }, function(toss) { console.log('Oh, noes, threw a ' + toss + '.'); }); console.log('3'); le gestionnaire est appelé de manière asynchrone .
Voyons voir un exemple qui montre dans quel ordre les choses sont exécutées:
1 2 3 Oh, noes, threw a 4. Cet extrait de code imprime une sortie similaire à ce qui suit:
1 2 3 Yay, threw a 6. Ou, si nous avons de la chance, nous voyons:
thenCe tutoriel promet démontre deux choses.
Premièrement, les gestionnaires que nous avons attachés à la promesse ont effectivement été appelés après l'exécution de tous les autres codes, de manière asynchrone.
Deuxièmement, le gestionnaire d'exécution n'était appelé que lorsque la promesse était remplie, avec la valeur avec laquelle elle a été résolue (dans notre cas, le résultat du lancer de dés). Il en va de même pour le gestionnaire de rejet.
Enchaîner les promesses et couler
La spécification exige que le signupPayingUser .then(displayHoorayMessage) .then(queueWelcomeEmail) .then(queueHandwrittenPostcard) .then(redirectToThankYouPage) function (les gestionnaires) doivent également renvoyer une promesse, ce qui permet d'enchaîner les promesses ensemble, ce qui donne un code qui semble presque synchrone:
signupPayingUserIci, function dieToss() { return Math.floor(Math.random() * 6) + 1; } function tossASix() { return new RSVP.Promise(function(fulfill, reject) { var n = Math.floor(Math.random() * 6) + 1; if (n === 6) { fulfill(n); } else { reject(n); } }); } function logAndTossAgain(toss) { console.log('Tossed a ' + toss + ', need to try again.'); return tossASix(); } function logSuccess(toss) { console.log('Yay, managed to toss a ' + toss + '.'); } function logFailure(toss) { console.log('Tossed a ' + toss + '. Too bad, couldn't roll a six'); } tossASix() .then(null, logAndTossAgain) //Roll first time .then(null, logAndTossAgain) //Roll second time .then(logSuccess, logFailure); //Roll third and last time renvoie une promesse, et chaque fonction de la chaîne de promesse est appelée avec la valeur de retour du gestionnaire précédent une fois qu'elle est terminée. À toutes fins pratiques, cela sérialise les appels sans bloquer le thread d'exécution principal.
Pour voir comment chaque promesse est résolue avec la valeur de retour de l'élément précédent dans la chaîne, nous revenons à lancer des dés. Nous voulons lancer les dés au maximum trois fois, ou jusqu'à ce que les six premiers apparaissent jsbin :
Tossed a 2, need to try again. Tossed a 1, need to try again. Tossed a 4. Too bad, couldn't roll a six. Lorsque vous exécutez cet exemple de code de promesses, vous verrez quelque chose comme ceci sur la console:
tossASixLa promesse retournée par logAndTossAgain est rejeté lorsque le tirage au sort n'est pas un six, donc le gestionnaire de rejet est appelé avec le tirage au sort réel. logAndTossAgain imprime ce résultat sur la console et renvoie une promesse qui représente un autre lancer de dés. Ce lancer, à son tour, est également rejeté et déconnecté par le prochain Tossed a 4, need to try again. Yay, managed to toss a 6. .
Parfois, cependant, vous avez de la chance * et vous parvenez à obtenir un six:
then* Vous n'êtes pas obligé d'obtenir cette chanceux. Il y a environ 42% de chances de lancer au moins un six si vous lancez trois dés.
Cet exemple nous apprend également quelque chose de plus. Voyez comment plus de lancers n'ont été faits après le premier roulement réussi d'un six? Notez que tous les gestionnaires d'exécution (les premiers arguments des appels à null) de la chaîne sont logSuccess, à l'exception du dernier, null. La spécification exige que si un gestionnaire (exécution ou rejet) n'est pas une fonction, la promesse retournée doit être résolue (remplie ou rejetée) avec la même valeur. Dans l'exemple de promesses ci-dessus, le gestionnaire d'exécution, then, n'est pas une fonction et la valeur de la promesse a été remplie avec un 6. Ainsi, la promesse renvoyée par signupPayingUser .then(displayHoorayMessage) .then(queueWelcomeEmail) .then(queueHandwrittenPostcard) .then(redirectToThankYouPage) .then(null, displayAndSendErrorReport) l'appel (le suivant dans la chaîne) va également être rempli avec 6 comme valeur.
fuite de cartes de crédit qui fonctionnent
Cela se répète jusqu'à ce qu'un gestionnaire d'exécution réel (celui qui est une fonction) soit présent, de sorte que l'exécution ruisselle jusqu'à ce qu'il soit manipulé. Dans notre cas, cela se produit à la fin de la chaîne où il est joyeusement déconnecté sur la console.
Gestion des erreurs
La spécification Promises / A + exige que si une promesse est rejetée ou qu'une erreur est renvoyée dans un gestionnaire de rejet, elle doit être gérée par un gestionnaire de rejet qui est «en aval» de la source.
Tirer parti de la technique de ruissellement ci-dessous donne un moyen propre de gérer les erreurs:
displayAndSendErrorReportÉtant donné qu'un gestionnaire de rejet n'est ajouté qu'à la toute fin de la chaîne, si un gestionnaire d'exécution de la chaîne est rejeté ou génère une erreur, il se répercute jusqu'à ce qu'il se heurte à var tossTable = { 1: 'one', 2: 'two', 3: 'three', 4: 'four', 5: 'five', 6: 'six' }; function toss() { return new RSVP.Promise(function(fulfill, reject) { var n = Math.floor(Math.random() * 6) + 1; fulfill(n); }); } function logAndTossAgain(toss) { var tossWord = tossTable[toss]; console.log('Tossed a ' + tossWord.toUppercase() + '.'); } toss() .then(logAndTossAgain) .then(logAndTossAgain) .then(logAndTossAgain); .
Revenons à nos dés bien-aimés et voyons cela en action. Supposons que nous voulions simplement lancer des dés de manière asynchrone et afficher les résultats:
function logAndTossAgain(toss) { var tossWord = tossTable[toss]; console.log('Tossed a ' + tossWord.toUpperCase() + '.'); } function logErrorMessage(error) { console.log('Oops: ' + error.message); } toss() .then(logAndTossAgain) .then(logAndTossAgain) .then(logAndTossAgain) .then(null, logErrorMessage); Lorsque vous exécutez ceci, rien ne se passe. Rien n'est imprimé sur la console et aucune erreur n'est générée, apparemment.
En réalité, une erreur est lancée, nous ne la voyons tout simplement pas car il n'y a pas de gestionnaire de rejet dans la chaîne. Puisque le code dans les gestionnaires est exécuté de manière asynchrone, avec une nouvelle pile, il n'est même pas déconnecté de la console. Soyons répare ça :
'Tossed a TWO.' 'Oops: Cannot read property 'toUpperCase' of undefined' L'exécution du code ci-dessus affiche l'erreur maintenant:
logAndTossAgainNous avons oublié de renvoyer quelque chose de undefined et la deuxième promesse est remplie avec toUpperCase. Le prochain gestionnaire d'exécution explose alors en essayant d'appeler rsvp.js sur ça. C’est une autre chose importante à retenir: renvoyez toujours quelque chose aux gestionnaires, ou soyez prêt dans les gestionnaires suivants à ne rien avoir passé.
à quoi sert Adobe Experience Design
Construire plus haut
Nous avons maintenant vu les bases des promesses JavaScript dans l'exemple de code de ce tutoriel. Un grand avantage de leur utilisation est qu'ils peuvent être composés de manière simple pour produire des promesses «composées» avec le comportement que nous souhaitons. Le function toss() { var n = Math.floor(Math.random() * 6) + 1; return new RSVP.resolve(n); // [1] } function threeDice() { var tosses = []; function add(x, y) { return x + y; } for (var i=0; i<3; i++) { tosses.push(toss()); } return RSVP.all(tosses).then(function(results) { // [2] return results.reduce(add); // [3] }); } function logResults(result) { console.log('Rolled ' + result + ' with three dice.'); } function logErrorMessage(error) { console.log('Oops: ' + error.message); } threeDice() .then(logResults) .then(null, logErrorMessage); La bibliothèque en fournit quelques-uns, et vous pouvez toujours créer les vôtres en utilisant les primitives et celles de plus haut niveau.
Pour le dernier exemple le plus complexe, nous voyageons dans le monde de 500 après JC jeu de rôle et lancer des dés pour obtenir les scores des personnages. Ces scores sont obtenus en roulant trois dés pour chaque compétence du personnage .
Laisse moi coller le code ici d'abord, puis expliquez ce qui est nouveau:
tossNous connaissons RSVP.resolve à partir du dernier exemple de code. Cela crée simplement une promesse qui est toujours remplie avec le résultat de lancer un dé. J'ai utilisé threeDice, une méthode pratique qui crée une telle promesse avec moins de cérémonie (voir [1] dans le code ci-dessus).
Dans RSVP.all, j'ai créé 3 promesses qui représentent chacune un tirage au sort et les ai finalement combinées avec RSVP.all. results prend un tableau de promesses et est résolu avec un tableau de leurs valeurs résolues, une pour chaque promesse constituante, tout en maintenant leur ordre. Cela signifie que nous avons le résultat des lancers dans 'Rolled 11 with three dice' (voir [2] dans le code ci-dessus), et nous retournons une promesse qui est remplie avec leur somme (voir [3] dans le code ci-dessus).
La résolution de la promesse résultante enregistre alors le nombre total:
RSVP.allUtiliser les promesses pour résoudre de vrais problèmes
Les promesses JavaScript sont utilisées pour résoudre des problèmes dans des applications beaucoup plus complexes que lancers de dés asynchrones sans bonne raison .
Si vous remplacez le lancement de trois dés par l'envoi de trois requêtes ajax à des points de terminaison séparés et en procédant lorsque tous sont retournés avec succès (ou si l'un d'entre eux a échoué), vous avez déjà une application utile de promesses et de
|_+_|.
Les promesses, lorsqu'elles sont utilisées correctement, produisent un code facile à lire, plus facile à raisonner, et donc plus facile à déboguer que les rappels. Il n'est pas nécessaire de définir des conventions concernant, par exemple, la gestion des erreurs puisqu'elles font déjà partie de la spécification.
Nous avons à peine effleuré la surface de ce que les promesses peuvent faire dans ce tutoriel JavaScript. Les bibliothèques Promise fournissent une bonne douzaine de méthodes et de constructeurs de bas niveau qui sont à votre disposition. Maîtrisez-les, et le ciel est la limite de ce que vous pouvez en faire.
A propos de l'auteur
Balint Erdi était un grand fan de jeux de rôle et d'AD&D il y a longtemps, et est maintenant une grande promesse et un fan d'Ember.js. Ce qui a été constant, c'est sa passion pour le rock & roll. C’est pourquoi il a décidé d’écrire un livre sur Ember.js qui utilise le rock & roll comme thème de l'application dans le livre. Inscrivez-vous ici pour savoir quand il se lance.
