Möglicherweise haben Sie Versprechen, und viele Leute sprechen darüber und verwenden sie, aber Sie wissen nicht, warum sie so besonders sind. Können Sie nicht Rückrufe verwenden? Was ist etwas Besonderes? Schauen wir uns in diesem Artikel an, was Versprechen sind und wie Sie sie verwenden, um eleganteren JavaScript -Code zu schreiben.
Verspricht leicht zu lesen
Zum Beispiel möchten wir einige Daten von der Hipsterjesus -API erfassen und diese Daten zu unserer Seite hinzufügen. Die Antwortdaten dieser APIs sind wie folgt:
{"text": "<p> lorem ipsum ... </p>", "Params": {"paras": 4, "Typ": "Hipster-Latin"}}Um Rückrufe zu verwenden, schreiben wir normalerweise so etwas wie Folgendes:
$ .getJson ('http://hipsterjesus.com/api/', Funktion (Daten) {$ ('body'). append (data.text);});Wenn Sie Erfahrung mit JQuery haben, werden Sie erkennen, dass wir eine Get -Anfrage erstellt haben und die Antwort JSON sein möchten. Wir übergeben auch eine Rückruffunktion, um das JSON der Antwort zu akzeptieren, um die Daten zum Dokument hinzuzufügen.
Eine andere Möglichkeit, das von der GetJson -Methode zurückgegebene Versprechensobjekt zu verwenden. Sie können einen Rückruf direkt an dieses Rückgabeobjekt binden.
var dadurch
Im obigen Callback -Beispiel werden das Ergebnis der API -Anforderung zum Dokument hinzugefügt, wenn die Antwort erfolgreich ist. Aber was passiert, wenn die Antwort fehlschlägt? Wir können einen fehlgeschlagenen Prozessor an unser Versprechen binden.
var dadurch
Die meisten Menschen löschen die Versprechenvariable, die prägnanter ist und die Funktion des Codes auf einen Blick sehen kann.
$ .getJson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). append (data.text);}). fail (function () {$ ('body'). append ('JQuery enthält auch einen Ereignishandler, der ständig auftritt und unabhängig vom Erfolg oder Misserfolg der Anfrage genannt wird.
$ .getJson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). append (data.text);}). fail (function () {$ ('body'). append ('<p> oh no, etwas falsch! Versprechen Sie dies wird immer hinzugefügt!. </p> ');Durch die Verwendung von Versprechen ist die Reihenfolge der Rückrufe erwartungsgemäß. Wir können sicherstellen, dass der normale Rückruf zuerst aufgerufen wird, dann der fehlgeschlagene Rückruf und schließlich der Rückruf, der immer wieder stattfindet.
Bessere API
Zum Beispiel möchten wir ein eingekapseltes Objekt der Hipsterjesus -API erstellen. Wir werden eine Methode hinzufügen - HTML, die HTML -Daten aus der API zurückgibt. Im Gegensatz zum Einrichten eines Rückrufprozessors, um Anforderungen zu analysieren, können wir die Methode ein Versprechensobjekt zurückgeben.
var hipsterjesus = {html: function () {return $ .getJson ('http://hipsterjesus.com/api/') .then (Funktion (Daten) {return data.text;}); }};Dies ist cool, sodass wir das Versprechensobjekt umgehen können, ohne mir Sorgen zu machen, wann oder wie er seinen Wert analysiert. Jeder Code, der einen Versprechen erfordert, kann mit einem erfolgreichen Antwortaufruf registriert werden.
Mit der damaligen Methode können wir das Ergebnis des Versprechens ändern und an den nächsten Prozessor in der Kette weitergeben. Dies bedeutet, dass wir jetzt die neue API wie folgt verwenden können:
hipsterjesus.html (). Done (Funktion (html) {$ ("body"). append (html);});Bis vor kurzem verfügt AngularJS über ein Killer -Feature, bei dem Vorlagen direkt an Versprechen gebunden werden können. In Angulars Controller wie folgt:
$ scope.hipsteripsum = $ http.get ('http://hipsterjesus.com/api/');Auf diese Weise ist es sehr einfach, {{hipsteripsum.text}} in der Vorlage zu schreiben. Wenn sich Versprechen auflöst, muss Angular die Ansicht nicht automatisch aktualisieren. Leider hat das Angular -Team dieses Merkmal aufgegeben. Es kann jetzt aktiviert werden, indem $ parseprovider.unwromises (true) bezeichnet wird. Ich hoffe, dass Angular diese Funktion bereits in anderen Frameworks enthalten hat (ich werde es im Auge behalten).
Kettenanruf
Das Beste an Versprechen ist, dass Sie sie zusammenbinden können. Zum Beispiel möchten wir einer API eine Methode hinzufügen, die ein Array zurückgibt.
var hipsterjesus = {html: function () {return $ .getJson ('http://hipsterjesus.com/api/') .then (Funktion (Daten) {return data.text;}); }, Absätze: function () {return this.html (). Dann (Funktion (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }};Wir verwenden diese HTML -Methode in der obigen Methode und verwenden sie in der Absatzmethode. Da der Rückgabewert der Versprechen -Rückruffunktion an den nächsten Rückruf in der Kette übergeben wird, können wir kleine, funktionale Methoden erstellen, um die Daten beim Durchsuchen zu ändern.
Wir können nach Bedarf jederzeit Versprechen verbinden. Fügen wir einen hinzu.
var hipsterjesus = {html: function () {return $ .getJson ('http://hipsterjesus.com/api/') .then (Funktion (Daten) {return data.text;}); }, Absätze: function () {return this.html (). Dann (Funktion (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }, Sätze: function () {return this.Tragraphs (). Dann (Funktion (Absätze) {return [] .concat.Apply ([], Absätze (Funktion (Funktion (Absatz) {return attack.Split ( /. /);});}); }};Mehrere Anrufe
Das vielleicht bekannteste Merkmal des Versprechens ist die Fähigkeit, mehrere APIs aufzurufen. Was passiert, wenn Sie bei Verwendung eines Rückrufs zwei API -Anrufe gleichzeitig erstellen müssen? Sie könnten Folgendes schreiben:
var firstData = null; var zweitdata = null; var responseCallback = function () {if (! firstData ||! SecondData) return; // etwas mach} $. get ("http://example.com/first", function (data) {firstData = data; responseCallback ();}); $ .get ("http://example.com/second", function (data) {SecondData = data; ResponseCallback ();});Dies ist viel einfacher zu verwenden Versprechen:
var firstPromise = $ .get ("http://example.com/first"); var SecondPromise = $ .get ("http://example.com/second"); $ .When (FirstPromise, Secondpromise) .Done (Funktion (FirstData, SecondData) {// etwas tun});Hier verwenden wir die When -Methode, um sie an einen Prozessor zu binden, der aufgerufen wird, wenn beide Anforderungen abgeschlossen sind.
abschließend
Das ist vielversprechend. Ich hoffe, Sie werden sofort an schreckliche Dinge denken, die mit Versprechen erreicht werden können. Was magst du am meisten an der Verwendung? Sag es mir in den Kommentaren!
*Hinweis: Der Einfachheit halber verwendet dieser Artikel die verzögerte Ausführung von JQuery. Es gibt subtile Unterschiede zwischen dem JQuery -aufgeschobenen Objekt und der Versprechen/A+ -Pezifikation, die standardmäßiger ist.
Der obige Artikel, wie Sie verspricht, um eleganterem JavaScript -Code zu schreiben, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.