Detaillierte Einführung in das asynchrone Javascript-Programmiermodell Promise-Modus

Detaillierte Einführung in das asynchrone Javascript-Programmiermodell Promise-Modus_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:49:20

Original

1123 Leute haben es durchsucht

Der Promise-Programmiermodus wird auch als Thenable bezeichnet, was als verzögerte Ausführung verstanden werden kann. Jedes Promise verfügt über eine einzigartige Schnittstelle namens then, die zurückruft, wenn das Promise fehlschlägt oder erfolgreich ist. Es stellt das Ergebnis eines Vorgangs dar, der möglicherweise lange dauert und nicht unbedingt abgeschlossen werden muss. Anstatt zu blockieren und auf den Abschluss eines langen Vorgangs zu warten, gibt dieses Muster ein Objekt zurück, das das versprochene Ergebnis darstellt.

Viele aktuelle JavaScript-Bibliotheken (wie jQuery und Dojo, AngularJS) fügen diese Abstraktion namens Promise hinzu. Über diese Bibliotheken können Entwickler das Promise-Muster in der realen Programmierung verwenden.

Im Folgenden verwenden wir jQuery als Beispiel, um zu diskutieren, wie die JavaScript-Bibliothek den Promise-Modus verwendet, um die asynchrone Verarbeitung zu handhaben. Tatsächlich bietet sie Fehlertoleranzunterstützung durch Rückrufe. Führen Sie den entsprechenden Rückruf aus, wenn eine Operation erfolgreich ist, fehlschlägt oder unter welchen Umständen auch immer, und versuchen Sie, alle Situationen zu bewältigen, die in einer bestimmten Logik auftreten können.

Lassen Sie uns zunächst einen Blick auf die allgemeine Funktionsweise von jQuery werfen:

Code kopieren Der Code lautet wie folgt:

var $info = $("#info "); 
$.ajax({
 url:"/echo/json/",
 data: { json: JSON.stringify({"name": "someValue"}) },
 Typ: „POST“,
Erfolg: Funktion(Antwort)
 {
 $info.text(response.name);
 }
});

In diesem Beispiel können Sie sehen, dass bei erfolgreicher Einstellung ein Rückruf angegeben wird, was eine gute Rückrufmethode ist. Dies ist kein Versprechen, und die offizielle Dokumentation von jQuery empfiehlt diese Methode nicht mehr (http:// api). .jquery.com/jQuery.ajax/#jqXHR). Wenn der Ajax-Aufruf abgeschlossen ist, wird die Erfolgsfunktion ausgeführt. Abhängig von den von der Bibliothek verwendeten asynchronen Vorgängen können Sie verschiedene Rückrufe verwenden (d. h. unabhängig davon, ob die Aufgabe erfolgreich ist oder nicht, wird ein Rückruf als Antwort durchgeführt). Die Verwendung des Promise-Musters vereinfacht diesen Prozess, und der asynchrone Vorgang muss nur einen Objektaufruf zurückgeben. Mit diesem Versprechen können Sie eine Methode namens then aufrufen, mit der Sie dann die Anzahl der Rückruffunktionen angeben können.

Sehen wir uns an, wie jQuery ein Versprechen erstellt:

Kopieren Sie den Code Der Code lautet wie folgt:

var $info = $("#info");
$.ajax({
 url: "/echo/json/",
 data: {
 json: JSON. stringify({
 "name": "someValue"
 })
 },
 type: "POST"
})
.then(function (response) {
 $info.text(response.name);
});

Das jQuery-Ajax-Objekt implementiert den Promise-Modus, indem es das xhr-Objekt zurückgibt, sodass wir die then-Methode aufrufen können. Der Vorteil davon besteht darin, dass Sie Aufrufe verketten können, um unabhängige Operationen zu erreichen, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

var $info = $("#info "); 
$.ajax({
 url: "/echo/json/",
 data: {
 json: JSON.stringify({
 "name": "someValue" 
 })
 },
 Typ: "POST"
})
.then(function (response) {
 $info.text(response.name);
 })
.then(function () {
 $info.append("...Mehr");
})
.done(function () {
 $info.append ("". ..endlich!");
});

Da viele Bibliotheken beginnen, das Promise-Muster zu übernehmen, werden asynchrone Vorgänge sehr einfach. Aber wenn Sie es aus der entgegengesetzten Perspektive betrachten, wie würde Promise aussehen? Ein sehr wichtiges Muster besteht darin, dass eine Funktion zwei Funktionen akzeptieren kann, einen Rückruf bei Erfolg und einen Rückruf bei Fehler.

Code kopieren Der Code lautet wie folgt:

var $info = $("#info");

$.ajax({
// URL ändern, um Fehler zu sehen
URL: „/echo/json/“,
Daten: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (response) {
// success
$info.text(response.name);
},
function () {
// failed
$info.text("guten Entwicklern passieren schlechte Dinge");
})
.always(function () {
$info.append("...finally");
});

Es ist zu beachten, dass wir in jQuery unabhängig von Erfolg oder Misserfolg einen Aufruf verwenden, um anzugeben, was wir aufrufen möchten.
Tatsächlich können Sie es auch so schreiben, was auch die in der offiziellen jQuery-Dokumentation empfohlene Methode ist:

Code kopieren Der Code lautet wie folgt:

var $info = $("#info ");

$.ajax({
// URL ändern, um Fehler zu sehen
URL: "/echo/json/",
Daten: {
json: JSON.stringify({
„name“: „someValue“
})
},
type: „POST“
})
.done(function (response) {
// success
$info.text(response.name);
}).fail(function () {
// Fehler
$info.text("guten Entwicklern passieren schlechte Dinge");
})
.always(function () {
$info.append("...finally");
});

Sehen wir uns an, wie AngularJS das Promise-Muster verwendet:

Code kopieren Der Code lautet wie folgt:

var m = angle.module("myApp ", [ ]);

m.factory("dataService", function ($q) {
function _callMe() {
var d = $q.defer();
setTimeout(function () {
d.resolve();
//defer.reject();
}, 100); 🎜 > };
});

function myCtrl($scope, dataService) {
$scope.name = "None";
$scope.isBusy = true;
dataService.callMe()

.then(function ( ) {

})
.then (function () {
// wie eine endgültige Klausel
$ scope.isbusy = false;
});
}

Sie können diese Beispiele in JSFiddle ausprobieren und sehen, was passiert. Die Verwendung von Promise für den asynchronen Betrieb ist eine sehr einfache Möglichkeit und kann auch Ihren Code vereinfachen. Es ist in der Tat eine gute Möglichkeit, zwei Fliegen mit einer Klappe zu schlagen.
Weitere Einführungen und Beispiele von Promise finden Sie auf der offiziellen Website (http://www.promisejs.org/).