JavaScript -Versprechen Nutzung

Die synchrone Programmierung ist im Allgemeinen einfach zu debugieren und zu erhalten, aber die asynchrone Programmierung bietet im Allgemeinen eine bessere Leistung und größere Flexibilität. Das größte Merkmal von Asynchron ist, dass es nicht erforderlich ist, zu warten. "Versprechen" wurde allmählich zum wichtigsten Teil von JavaScript, und eine große Anzahl neuer APIs hat begonnen, das Versprechenprinzip umzusetzen. Schauen wir uns an, was Versprechen ist und seine API und Verwendung!

Verspricht Status

Die XMLHTTPrequest -API ist asynchron, verwendet jedoch die Versprechen -API nicht. Es gibt jedoch viele native JavaScript -APIs, die Promise verwenden:

*Batterie -API

*API abrufen (ein Ersatz für XHR)

*Servicearbeiter -API

Versprechen werden in Zukunft nur beliebter und gemeinsamer, und es ist sehr wichtig, dass alle Front-End-Entwickler es verwenden werden. Eine andere Sache, die erwähnenswert ist, ist, dass Node.js eine versprichtbasierte Plattform ist (es ist offensichtlich, dass Versprechen ein Kernmerkmal davon ist).

Die Verwendung von Versprechen ist einfacher als Sie denken - wenn Sie SetTimeout verwendet haben, um asynchrone Aufgaben zu kontrollieren!

Grundlegende Nutzung des Versprechens

Der neue Promise () -Konstruktor kann in herkömmlichen asynchronen Aufgaben verwendet werden, genau wie die vorherige Verwendung von SetTimeout und XMLHTTPrequest. Ein neues Versprechen wird mit dem neuen Keyword generiert. Gleichzeitig verspricht dies Versprechen, die Auflösungs- und Ablehnungsfunktionen ermöglichen, damit wir Rückrufvorgänge ausführen können:

 var p = new Promise (Funktion (Resolve, ablehnen) {// eine asynchriese Aufgabe asynchronisiert und dann ... if (/ * gute Bedingung */) {Resolve ('Erfolg!');} else {abgelehnt ('fehler!');}});

Programmierer können die Funktionen in der Rückruffunktion gemäß der Ausführungssituation manuell aufrufen und ablehnen. Hier ist ein realistischeres Beispiel, das einen XMLHTTPrequest-Anruf in eine versprichtbasierte Aufgabe umwandelt:

 // aus Jake Archibald's Versprechen und zurück: // http://www.html5rocks.com/en/tutorials/es6/promises/#tocpromising-xmlhttprequestFunction Get (url) {// ein neues Versprechen zurückgeben. Neues Versprechen zurückgeben (Funktion (Resolve, Ablehnung) {// das übliche xhr -stuff var req = new Xmlhttprequest (); req.open ('get', url); req.onload = function () {// Dies wird sogar auf 404 usw. bezeichnet. } else {// Ablehre mit dem Statustext // ein aussagekräftiger Fehler (Fehler (Req.StatUnext)); {console.log ("Erfolg!", Antwort);}, Funktion (Fehler) {console.Error ("fehlgeschlagen!", Fehler);});

Promise.Resolve () und Promise.Reject () kann direkt aufgerufen werden. Manchmal, wenn wir feststellen, dass das Versprechen nicht ausgeführt werden muss, müssen wir keine Neuen verwenden, um ein Versprechensobjekt zu erstellen, aber direkt als Versprechen nennen. Zum Beispiel:

 var usercache = {}; Funktion getUserDetail (Benutzername) {// In beiden Fällen zwischengespeichert oder nicht, wird ein Versprechen zurückgegeben, wenn (userCache [Benutzername]) {// ein Versprechen zurückgeben, ohne das "neue" Keyword -Rückgabeversprechen.Resolve (Usercache [Benutzername]); } // Verwenden Sie die Fetch -API, um die Informationen zu erhalten.

Weil Versprechen auf jeden Fall zurückkehren wird, können wir die dann die dann verwenden und Methoden fangen, um den Rückgabewert zu behandeln!

Dann Methode

Alle Versprechen -Objektinstanzen haben eine damalige Methode, die verwendet wird, um mit diesem Versprechen zu interagieren. Zunächst ruft in der dann Methode die Funktion resolve () standardmäßig auf:

 New Promise (Funktion (Resolve, Ablehnung) {// Eine Mock -Async -Aktion mit setTimeout setTimeout (function () {Resolve (10);}, 3000);}). Dann (Funktion (Ergebnis) {console.log (Ergebnis);}); // von der Konsole: // 10

Dann ist die Auslöserzeit des Rückrufakts, dass Versprechen ausgeführt wird. Wir können auch Rückrufvorgänge in verketteterer Methode durchführen:

 New Promise (Funktion (Resolve, Ablehnung) {// Eine mock -asynchriegrenze Aktion mit setTimeout setTimeout (function () {Resolve (10);}, 3000);}). Dann (Funktion (num) {console.log ('zuerst:', num); }). Dann (Funktion (num) {console.log ('last dann:', num);}); // aus der Konsole: // zuerst: 10 // zweite dann: 20 // letztes dann: 40: 40

Sie werden feststellen, dass jeder Ruf den Rückgabewert des vorherigen und dann als Parameter aufrufen wird.

Wenn ein Versprechen ausgeführt wurde und die Single dann erneut aufgerufen wird, wird die Rückrufaktion erneut ausgeführt. Wenn die Rückruffunktion Ablehnung in diesem Versprechen ausgeführt wird und die dann aufgerufene Methode aufgerufen wird, wird die Rückruffunktion nicht ausgeführt.

Fangmethode

Fang, wenn ein Versprechen abgelehnt (abgelehnt) wird, wird die Fangmethode ausgeführt:

 New Promise (Funktion (Resolve, Ablehnung) {// Eine Mock -Async -Aktion mit setTimeout setTimeout (function () {reject ('Done!');}, 3000);}). Dann (Funktion (e) {console.log ('Done', E); Erledigt!'

Normalerweise verarbeiten wir das Ergebnis eines Ausführungsfehlers in der Ablehnungsmethode und führen das Ausnahmeergebnis in den Fang aus:

Ablehnung (Fehler ("Daten konnten nicht gefunden werden");

Versprechen.Alle Methode

Es gibt oft ein Szenario, wenn wir asynchron anrufen: Wir müssen gleichzeitig mehrere asynchrone Operationen anrufen, aber wir hoffen, dass wir den Antwortvorgang erst nach Abschluss aller Operationen ausführen werden - dies ist die Rolle des Versprechens. Die Methode für Versprechen.Alle kann mehrere Versprechen als Parameter in Form eines Arrays erhalten, und die Rückruffunktion wird aufgerufen, nachdem all diese Versprechen erfolgreich ausgeführt wurden.

 Versprachen.All ([Promise1, Promise2]). Dann (Funktion (Ergebnisse) {// beide Versprechen behoben}). Catch (Funktion (Fehler) {// Ein oder mehrere Versprechen wurde abgelehnt});

Ein gutes Beispiel für die Verwendung von Promise. Alle sind die Durchführung mehrerer AJAX -Operationen (über Fetch):

 var request1 = fetch ('/user.json'); var request2 = fetch ('/articles.json'); Promise.All ([Request1, Request2]). Dann (Funktion (Ergebnisse) {// beide Versprechen geschehen!});

Wir können auch eine Mischung aus APIs von Abruf- und Batteriezustands -State durchführen, da sie alle Versprechen zurückgeben:

 Versprechen.all ([fetch ('/users.json'), navigator.getbattery ()]). Dann (Funktion (Ergebnisse) {// beide Versprechen geschafft!});

Sobald die Ablehnungsfunktion in das Versprechen aufgerufen wurde, wird die Ausführung abgelehnt und kann nicht normal abgeschlossen werden, die Situation ist etwas kompliziert. Sobald das Versprechen abgelehnt ist, wird die Catch -Methode die erste ausgeführte Ablehnungsfunktion erfassen:

 var req1 = new Promise (function (Resolve, ablehnen) {// Eine Mock -Async -Aktion mit setTimeout setTimeout (function () {Resolve ('First!');}, 4000);}); var req2 = new Promise (function (function (resolve) {// a mock async action mit setTimeout (function) (functionTimeout () () {{) {). 3000);}); Versprechen.All ([req1, req2]). Dann (Funktion (Ergebnisse) {console.log ('dann:', eins);}). Catch (function (err) {console.log ('catch:', err);}); // aus der console: // catch: zweitens!

Promise.All ist eine sehr wichtige Schnittstelle und wird in vielen neu geborenen Versprechen -APIs eine wichtige Rolle spielen.

Versprechen.Race

Promise.Race ist eine interessante Funktion - es wartet nicht, dass alle Versprechen gelöst oder abgelehnt werden, aber in allen Versprechen wird es abfeuern, bis eine Ausführung endet:

 var req1 = new Promise (Funktion (Resolve, Ablehnung) {// Eine mock -asynchronisierte Aktion mit setTimeout setTimeout (function () {resolve ('zuerst!');}, 8000);}); var req2 = new Promise (function (function (resolve) {// a mock async action unter Verwendung von SetTimeOut -SetTimeout (function) () () {) {) {). 3000);}); Promise.Race ([Req1, Req2]). Dann (Funktion (eins) {console.log ('dann:', eins);}). Catch (function (eins, zwei) {console.log ('catch:', eins);}); // vom console: // dann: zweitens!

Ein nützliches Szenario besteht darin, Ressourcen von mehreren Spiegelservern herunterzuladen. Sobald einer zurückkehrt, werden die anderen Renditen nicht verarbeitet.

Lernen Sie, Versprechen zu verwenden

Versprechen war in den letzten Jahren ein sehr heißes Thema und wurde sogar aus JavaScript gezogen, um eine Spracharchitektur zu werden. Ich glaube, wir werden bald immer mehr JavaScript-APIs sehen, die vielversprechende Muster verwenden werden.

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.