Beispiel für die Kapselung im Promise-Modus für asynchrone JavaScript-Callback_Javascript-Fähigkeiten

Interaktionen auf Webseiten werden immer komplexer und JavaScript verfügt über immer mehr asynchrone Vorgänge. Beispielsweise erfordern gängige Ajax-Anfragen eine Antwortoperation, wenn die Anfrage abgeschlossen ist. Während des Anfrageprozesses kann der Benutzer auch andere Vorgänge ausführen, ohne die Seite zu blockieren freundlich. Für Entwickler ist es jedoch sehr unfreundlich, solche Vorgänge in großen Mengen durchzuführen. Der durch die asynchrone Anforderung abgeschlossene Vorgang muss in der Rückruffunktion vordefiniert sein und diese Funktion muss aufgerufen werden, wenn die Anforderung abgeschlossen ist. Diese nichtlineare asynchrone Programmiermethode bereitet Entwicklern große Unannehmlichkeiten, bringt viele Unannehmlichkeiten mit sich, erhöht die Kopplung und Komplexität des Codes und die Organisation des Codes wird ebenfalls sehr unelegant sein, was die Effizienz des Codes erheblich verringert . Wartbarkeit. Die Situation ist komplizierter. Wenn ein Vorgang warten muss, bis mehrere asynchrone Ajax-Anfragen abgeschlossen sind, kommt es zu einer Verschachtelung der Rückruffunktion. Wenn Sie mehrere Ebenen verschachteln müssen, können Sie nur um Segen bitten.
Werfen wir einen Blick auf die folgende allgemeine asynchrone Funktion.

Code kopieren Der Code lautet wie folgt:

var showMsg = function(){
setTimeout( function(){
alarm( 'hello' );
}, 5000 );
};

Wenn Sie der Funktion einen Rückruf hinzufügen möchten, tun Sie dies normalerweise.

Code kopieren Der Code lautet wie folgt:

var showMsg = function( callback ){
setTimeout (function(){
alarm( 'hello' );
// Callback hier hinzufügen
callback();
}, 5000 );
};

Wenn Sie easy.js Promise verwenden, ist die Methode zum Hinzufügen von Rückrufen viel eleganter, vorausgesetzt, die ursprüngliche Funktion muss in eine Promise-Instanz gekapselt werden.

Code kopieren Der Code lautet wie folgt:

var showMsg = function(){
// Promise-Instanz erstellen
var Promise = new E.Promise();

setTimeout(function(){
warning( 'hello' );

// Ändern der Zustand des Versprechens
                                                                                                                                        50000000000 >
Es gibt drei wichtige Schritte, um eine gewöhnliche Funktion in eine Versprechensinstanz zu kapseln. Der erste Schritt besteht darin, eine Versprechensinstanz innerhalb der Funktion zu erstellen. Der zweite Schritt besteht darin, den Status des Versprechens in „Abgeschlossen“ zu ändern, nachdem die Bereitstellungsfunktion ausgeführt wurde Der dritte Schritt besteht darin, diese Versprechensinstanz zurückzugeben. Jede Promise-Instanz hat drei Zustände: „Pending“ (unvollständig), „Resolved“ (abgeschlossen, erfolgreich) und „Rejected“ (abgelehnt, fehlgeschlagen). Sehen wir uns an, wie man Rückrufe hinzufügt.

Code kopieren

Der Code lautet wie folgt:

showMsg().then(function( str ){ // Der Rückruf wird hier hinzugefügt callback( str );});

Dies trennt die Rückruffunktion vollständig von der ursprünglichen asynchronen Funktion. Aus Sicht der Codeorganisation ist sie viel eleganter. „resolve“ akzeptiert einen Parameter, der einfach verwendet werden kann, um Daten an den mit der then-Methode hinzugefügten Callback zu übergeben.
Für Ajax-Anfragen kapselt easy.js die Ajax-Methode direkt in ein Promise-Objekt, und Sie können die then-Methode direkt zum Rückruf hinzufügen.

Code kopieren

Der Code lautet wie folgt:

E.ajax({ url : 'test1 .php', Typ: 'GET'}).then(function(){ // Einen Rückruf für erfolgreiche Anfrage hinzufügen

}, function(){

/ / Rückruf bei Anforderungsfehler hinzufügen
});

Die Methode

then akzeptiert zwei Funktionen als Parameter, die erste Funktion ist der abgeschlossene Rückruf und die zweite der fehlgeschlagene Rückruf.
Was passiert, wenn es mehrere oben erwähnte Ajax-Anfragen gibt? Dann müssen wir die when-Methode verwenden. Diese Methode kann mehrere Promise-Instanzen als Parameter akzeptieren.

Code kopieren Der Code lautet wie folgt:

var request = E.when(E. ajax({
url : 'test1.php',
type : 'GET'
}), E.ajax({
url : 'test2.php',
type : ' GET'
}));

requests.then(function( arg1, arg2 ){
console.log( 'success：' arg1[0] arg2[0] );
}, function( arg1, arg2 ){
console.log( 'failure：' arg1 arg2 );
});

Die when-Methode besteht darin, mehrere Promise-Instanzen in einem Array zu speichern und zu warten, bis alle Promise-Instanzen im Array abgeschlossen sind, bevor der abgeschlossene Rückruf ausgeführt wird. Sobald eine Instanz abgelehnt wird, wird sie sofort ausgeführt.

Promise-Muster ist eine der Spezifikationen von CommonJS. Viele gängige JavaScript-Bibliotheken verfügen über entsprechende Implementierungen, wie z. B. jQuery und Dojo, die diese Funktionen implementiert haben. Hier möchte ich mich immer noch über jQuerys Deferred beschweren. Unabhängig von seiner internen Verwendung sollte dieses Modul das Modul mit der niedrigsten Nutzungsrate durch Benutzer sein.