Heim > Web-Frontend > js-Tutorial > Hauptteil

Spezifikationen für das Schreiben von asynchronem JavaScript-Programmiercode versprechen Studiennotizen_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 16:14:27
Original
1028 Leute haben es durchsucht

Meine Arbeit ist in letzter Zeit etwas einfacher geworden und ich erinnerte mich an ein Wortversprechen, das ich schon immer gesehen hatte, also habe ich es eine Weile geduldig studiert.

1: Was ist Versprechen? Warum gibt es dieses Ding?

Zuallererst wurde Promise entwickelt, um das Problem des Codeschreibens in der asynchronen Javascript-Programmierung zu lösen.
Mit der Entwicklung von JavaScript gibt es immer mehr asynchrone Szenarien. Das Front-End verfügt über AJAX, setTimeout usw. und der Back-End-Knoten ist asynchroner. Nach dem traditionellen Ansatz sind verschiedene Rückrufe in Rückrufe eingebettet. Code kann verwirrend sein.
Zu diesem Zeitpunkt schlug die CommonJS-Community eine Spezifikation namens Promise/A vor, die definiert, wie asynchroner Code geschrieben wird, einschließlich der Verwendung von when/then/resolve usw. zum Organisieren von asynchronem Code.
Da diese Spezifikation sehr elegant ist, haben viele Leute sie implementiert, einschließlich Promise(), das nativ von Browsern unterstützt wird und in jQuery, when.js usw. zurückgestellt wird.
Da diese Bibliotheken alle dieser Spezifikation entsprechen, reicht es aus, eine zu erlernen. Ich habe hauptsächlich die Verzögerung von jQuery gelernt, daher geht es in diesem Artikel hauptsächlich um diese Implementierung.

Zweitens: jQuery wird zurückgestellt

Zunächst einmal hat Lehrer Ruan Yifeng zum Thema zurückgestellte Objekte einen sehr ausführlichen Artikel geschrieben, die Adresse finden Sie hier. Es wird empfohlen, dass Sie zuerst seinen Artikel lesen und dann weiterlesen.
Wie oben erwähnt, werden Versprechen zur Lösung asynchroner Probleme (z. B. Ajax) verwendet. Vergleichen wir daher ihre Unterschiede.
Die klassische jQuery-AJAX-Schreibmethode ist

Code kopieren Der Code lautet wie folgt:

$.ajax({
Geben Sie ein: „get“,
URL: "",
Erfolg: function () {},
Fehler; Funktion () {}
});

Die Erfolgs- und Fehlerparameter sind die Rückruffunktionen, wenn Erfolg/Misserfolg auftritt.

Und jetzt ist die AJAX-Schreibmethode von jQuery zu

geworden

Code kopieren Der Code lautet wie folgt:

$.ajax({
Geben Sie „get“ ein.
URL: „“
}).done(function () {}).fail(function () {});

Nach Erfolg wird die Funktion in erledigt aufgerufen, und bei einem Fehler wird die Funktion in fehlgeschlagen aufgerufen.

Wenn Sie dies sehen, haben Sie möglicherweise Fragen: Auf welchem ​​Objekt befinden sich die Done/Fail-Methoden? Welches Objekt gibt $.ajax() zurück und warum gibt es diese beiden Methoden?
Die Antwort liegt im unten vorgestellten verzögerten Objekt.

jQuery bietet einen neuen Typ Deferred. Erstellt durch $.Deferred(). Zum Beispiel

Code kopieren Der Code lautet wie folgt:

var def = $.Deferred();

Diese Definition erbt viele Methoden, einschließlich erledigt/fehlgeschlagen/aufgelöst/abgelehnt usw.
Hier wissen wir also auch, dass das obige $.ajax() tatsächlich dieses Objekt zurückgibt.

Für verzögerte Objekte gibt es viele Methoden. Weitere Informationen finden Sie unter API

Der erste Schritt besteht darin, auf natürliche Weise ein Def-Objekt zu generieren. Hier gibt es viele Methoden, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var def = $.Deferred(); // Generiere es selbst
$.ajax({}); // Die Ajax-Methode gibt auch ein Def-Objekt zurück
$.when(); // when-Methode gibt auch ein Def-Objekt zurück

Hier kann $.when() separat besprochen werden. Diese Methode empfängt normalerweise ein oder mehrere verzögerte Objekte und bestimmt dann den Status des von $.when() zurückgegebenen Objekts basierend auf dem Status dieser verzögerten Objekte. Ein Verwendungsszenario sind mehrere Ajax-Anfragen. Wenn eine davon fehlschlägt, werden sie alle als Fehler betrachtet. Dann können Sie mehrere Ajax-Methoden in $.when() übergeben, z. B. $.when($.ajax(), $. ajax()). Dann gibt $.when ein Def-Objekt zurück (beurteilt anhand der Ergebnisse dieser beiden Anforderungen).

Nachdem Sie das Def-Objekt erhalten haben, gibt es eine Reihe von Methoden, um den Status dieses Objekts zu ändern

Code kopieren Der Code lautet wie folgt:

def.resolve(); // Setzen Sie das Def-Objekt auf abgeschlossen, dann wird die in def.done() gebundene Funktion sofort ausgeführt.
def.reject(); // Setze das Def-Objekt auf fehlgeschlagen, dann wird die in def.fail() gebundene Funktion sofort ausgeführt.
def.notify(); // Wenn das Def-Objekt ausgeführt wird, ist der entsprechende Rückruf def.progress().

Der nächste Schritt besteht darin, die Rückrufmethode festzulegen. Die Reihenfolge entspricht der oben genannten, d. h. welcher Rückruf in welchem ​​Zustand aufgerufen wird

Code kopieren Der Code lautet wie folgt:

def.done(); // Entspricht def.resolve();
def.fail(); // Entspricht def.reject();
def.progress(); // Entspricht def.notify();
// Besonderes
def.always(); // Wird bei Erfolg oder Misserfolg aufgerufen
def.then(); // Akzeptiere mehrere Funktionen in der Reihenfolge Erfolg (done), Misserfolg (fail) und Fortschritt (progress)

Tatsächlich ist die Verwendung verzögerter Objekte zu diesem Zeitpunkt nahezu identisch. Allerdings bietet jQuery auch mehrere APIs

Code kopieren Der Code lautet wie folgt:

// Überprüfen Sie die aktuelle Statusklasse
def.isRejected();
def.isResolved();
def.state();

Wie die Namen dieser APIs vermuten lassen, werde ich nicht auf Details eingehen. Weitere Informationen finden Sie in der oben angegebenen jQuery-API-Dokumentation.

Es gibt noch eine andere Methode: Manchmal möchten wir ein externes Def-Objekt angeben, und dieses Objekt kann dann Rückrufe für verschiedene Zustände festlegen, aber seinen Zustand nicht ändern. Dann können wir

verwenden

Code kopieren Der Code lautet wie folgt:

def.promise();

Gibt ein Versprechensobjekt zurück, das eine Teilmenge des zurückgestellten Objekts ist. Es gibt keine Auflösungs-/Abweisungsmethoden. Dies dient hauptsächlich dazu, den Zustand des Def-Objekts zu schützen von außen verändert.

An dieser Stelle habe ich mit dem Gespräch über Versprechen fertig. Sie können es jetzt in Ihren eigenen Projekten verwenden. Außerdem wünsche ich Ihnen allen ein frohes neues Jahr und ein erfolgreiches Jahr der Schafe^ ^.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage