Vous avez peut-être des promesses entendues, et beaucoup de gens en parlent, en l'utilisant, mais vous ne savez pas pourquoi ils sont si spéciaux. Vous ne pouvez pas utiliser des rappels? Qu'est-ce qui est spécial? Dans cet article, jetons un coup d'œil sur les promesses et comment les utiliser pour écrire un code JavaScript plus élégant.
Promet facile à lire
Par exemple, nous voulons récupérer certaines données de l'API HipsterJesus et ajouter ces données à notre page. Les données de réponse de ces API sont les suivantes:
{"Text": "<p> lorem ipsum ... </p>", "params": {"paras": 4, "type": "hipster-latin"}}Pour utiliser des rappels, nous écrivons généralement quelque chose comme les suivants:
$ .getjson ('http://hipsterjesus.com/api/', fonction (data) {$ ('body'). APPEND (data.text);});Si vous avez de l'expérience en utilisant jQuery, vous reconnaîtrez que nous avons créé une demande GET et que la réponse soit JSON. Nous passons également une fonction de rappel pour accepter le JSON de la réponse pour ajouter les données au document.
Une autre façon d'écrire est d'utiliser l'objet Promise renvoyé par la méthode Getjson. Vous pouvez lier un rappel directement à cet objet de retour.
var promesse = $ .getjson ('http://hipsterjesus.com/api/'); promesse.done (function (data) {$ ('body'). append (data.text);});Dans l'exemple de rappel ci-dessus, il ajoute le résultat de la demande d'API au document lorsque la réponse est réussie. Mais que se passe-t-il lorsque la réponse échoue? Nous pouvons lier un processeur raté sur notre promesse.
var promesse = $ .getjson ('http://hipsterjesus.com/api/'); promesse.done (function (data) {$ ('body'). annex (data.text);}); promesse.fail (function () {$ ('body'). annex (<p> Oh non, quelque chose qui a mal tourné! </p> ');});La plupart des gens suppriment la variable de promesse, qui est plus concise et peut voir la fonction du code en un coup d'œil.
$ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). annex (data.text);}). fail (function () {$ ('body').JQuery contient également un gestionnaire d'événements qui se produit tout le temps et sera appelé quel que soit le succès ou l'échec de la demande.
$ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). annex (data.text);}). fail (function () {$ ('body'). A SPEND ('<p> oh non, quelque chose est mal tourné! </p>');}). toujours (function () {$ ('' '). sera toujours ajouté!En utilisant des promesses, l'ordre des rappels est comme prévu. Nous pouvons nous assurer que le rappel normal est appelé d'abord, puis le rappel raté, et enfin le rappel qui continue de se produire.
Meilleure API
Par exemple, nous voulons créer un objet encapsulé de l'API HipsterJesus. Nous ajouterons une méthode - HTML, qui renvoie les données HTML de l'API. Contrairement à la configuration d'un processeur de rappel pour analyser les demandes, nous pouvons faire remettre en place la méthode un objet Promise.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }};C'est cool pour que nous puissions contourner l'objet Promise sans nous soucier du moment ou de la façon d'analyser sa valeur. Tout code qui nécessite une valeur de retour de promesse peut être enregistré avec un rappel de réponse réussi.
La méthode alors nous permet de modifier le résultat de la promesse et de le transmettre au processeur suivant dans la chaîne. Cela signifie que maintenant nous pouvons utiliser la nouvelle API comme ceci:
HipsterJesus.html (). Done (fonction (html) {$ ("body"). APPEND (html);});Jusqu'à récemment, AngularJS a une caractéristique de tueur, où les modèles peuvent être directement liés aux promesses. Dans le contrôleur d'Angular, comme ceci:
$ scope.hipSteripSum = $ http.get ('http://hipsterjesus.com/api/');De cette façon, il est très facile d'écrire {{hipstelipsum.text}} dans le modèle. Lorsque la promesse résout, Angular n'a pas besoin de mettre à jour automatiquement la vue. Malheureusement, l'équipe angulaire a abandonné cette fonctionnalité. Il peut désormais être activé en appelant $ parseprovider.unwrappromis (true). J'espère qu'Angular a déjà cette fonctionnalité incluse dans d'autres cadres (je garderai un œil dessus).
Appel de chaîne
La meilleure partie de la promesse est que vous pouvez les attacher ensemble. Par exemple, nous voulons ajouter une méthode à une API qui renvoie un tableau.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, paragraphes: function () {return this.html (). puis (fonction (html) {return html.replace (/ <[^>] +> / g, "") .split ("");}); }};Nous utilisons cette méthode HTML dans la méthode ci-dessus, nous l'utilisons dans la méthode des paragraphes. Étant donné que la valeur de retour de la fonction de rappel Promise est transmise au rappel suivant de la chaîne, nous sommes libres de créer de petites méthodes fonctionnelles pour modifier les données lors de leur passage.
Nous pouvons connecter les promesses à tout moment au besoin. Ajoutons-en un.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, paragraphes: function () {return this.html (). puis (fonction (html) {return html.replace (/ <[^>] +> / g, "") .split ("");}); }, Sentences: function () {return this.Paragraphs (). alors (fonction (paragraphes) {return [] .concat.apply ([], paragraphs.map (function (paragraph) {return paragraph.split (/. /);}));}); }};Appels multiples
La caractéristique la plus importante de la promesse est peut-être la possibilité d'appeler plusieurs API. Que se passe-t-il si vous devez créer deux appels API en même temps lorsque vous utilisez un rappel? Vous pourriez écrire ceci:
var firstData = null; var secondData = null; var réponsescallback = function () {if (! FirstData ||! SecondData) return; // faire quelque chose} $. get ("http://example.com/first", function (data) {firstData = data; répondsCallback ();}); $ .get ("http://example.com/second", function (data) {secondData = data; ResponseCallback ();});C'est beaucoup plus facile à utiliser la promesse:
var firstPromise = $ .get ("http://example.com/first"); var secondPromise = $ .get ("http://example.com/second"); $ .when (FirstPromise, SecondPromise) .Done (fonction (FirstData, SecondData) {// Do quelque chose});Ici, nous utilisons la méthode quand le lier à un processeur qui s'appelle lorsque les deux demandes sont terminées.
en conclusion
C'est une promesse. J'espère que vous penserez immédiatement à des choses terribles qui peuvent être réalisées avec promesse. Qu'est-ce que vous aimez le plus dans les utiliser? Dites-moi dans les commentaires!
* Remarque: Pour simplifier, cet article utilise l'exécution retardée de jQuery. Il existe des différences subtiles entre l'objet différé jQuery et la spécification Promises / A +, ce qui est plus standard.
L'article ci-dessus comment utiliser les promesses pour écrire le code JavaScript plus élégant est tout le contenu que je partage avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.