Nehmen Sie das $.Deferred-Objekt in jQuery als Beispiel, um zu erklären, wie Promise-Objekte mit asynchronen Issues_jquery umgehen

Promises ist eine Abstraktion, die das asynchrone Verhalten von Code eleganter macht. Es ist wahrscheinlich das nächste Programmierparadigma von JavaScript. Ein Promise repräsentiert das Ergebnis der Aufgabe, unabhängig davon, ob die Aufgabe abgeschlossen ist.

Einige moderne Browser stellen bereits native Promise-Objekte bereit, die dem Promise/A-Standard folgen. In jQuery1.5 wird $.Deferred bereitgestellt (das in ein Promise-Objekt konvertiert werden kann). Viele bekannte Frameworks stellen auch Promise-Objekte bereit. Das Promise-Objekt ist bereits ein sehr wichtiges Muster in JavaScript. Die Eleganz, die es bei der Lösung asynchroner Probleme zeigt, ist genau das, was JavaScript braucht. Nehmen wir das $.Deferred-Objekt in jQuery als Beispiel, um zu sehen, wie das Promise-Objekt asynchrone Probleme behandelt. Was das $.Deferred-Objekt betrifft, können Sie es auf der offiziellen jQuery-Website nachlesen, daher werde ich hier nicht auf Details eingehen.

1. Kapselung asynchroner Operationen

Nehmen wir zunächst das Laden von Bildern als Beispiel und schauen uns den folgenden Code an:

//加载图片函数
var loadImg = function(url){
　　var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功则触发deferred.resolve
　　　　deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){
　　　 //失败则触发deferred.reject
  deferred.reject( e );
 } ;
　　//返回promise对象
 return deferred.promise() ;
} ;
//请求图片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//请求成功
request.done(function(img){
　　//code
}) ;
//可以注册多个回调，当请求成功时，会按注册的顺序执行，fail和always也有此性质
request.done(function(img){
　　// code
});
//请求失败
request.fail(function(){
　　// code
}) ;
//请求完毕
request.always(function(){
　　//code
});

Im obigen Code kapsele ich die Bildladevorgänge, delegiere sie an $.Deferred und generiere schließlich ein Rückgabeversprechen. Die Verwendung dieser Methode ist sauberer und klarer als die Verwendung extern bereitgestellter Rückrufe. Ein weiterer, wichtigerer Grund dafür ist die Verbindung von Versprechen.

2. Verbindung versprechen

Nehmen wir den Code zum Laden des Bildes oben als Beispiel, um zu sehen, wie Versprechen verknüpft werden:

var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ;
request.done(function(img){
　　//code
}) ;
//request连接别的promise之后返回的promise
var request3 = request.then(function(img){
　　//request执行成功时 连接request1
　　var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request1 ;
},function(e){
　　//request执行失败时 连接request2
　　var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request2 ;
});
//request执行并且request1或request2成功执行时
request3.done(function(done){
　　//code
}) ;

Das Promise-Objekt stellt die Methode then bereit, die zwei Rückrufe akzeptiert: onResolve und onReject. Durch die Rückgabe von Promise im Callback kann die Verbindung zwischen Promises hergestellt werden. Auf diese Weise können asynchrone Operationen seriell ausgeführt werden.

Gleichzeitig bietet jQuery auch eine andere Verbindungsmethode, siehe Code:

var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ;
var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ;
//通过$.when连接promise
var request2 = $.when(request,request1) ;
request2.done(function(img,img){
　　//code
}) ;

jQuery stellt die Funktion $.when bereit, die n Promise-Objekte als Parameter akzeptieren kann. Sie verbindet die Ausführungsergebnisse von Promises miteinander. Mit diesem Ansatz können mehrere asynchrone Vorgänge parallel ausgeführt werden.

3. Das Ende

Der Code hier dient als Beispiel für das Laden von Bildern. Der gleiche Ansatz kann auf andere asynchrone Vorgänge angewendet werden. Beispielsweise geben $.ajax und $.fn.animate in jQuery ein Versprechen zurück. Auf der Knotenseite können einige asynchrone Vorgänge (Datenbanken lesen, Dateien lesen usw.) auch in Versprechen gekapselt werden. Implementieren Sie dann den Zusammenführungsvorgang für mehrere Versprechen, um sie seriell oder parallel auszuführen.

Anhang: Zurückgestelltes Objekt

Deferred selbst wird nicht nur zum Konvertieren von Promise-Objekten verwendet, sondern ist auch ein sehr nützliches Objekt. Neben der Bereitstellung von Methoden und Eigenschaften wie dem Promise-Objekt verfügt es auch über die Benachrichtigungsfunktion und die Fortschrittsfunktion. Diese beiden Funktionen sind bei der Implementierung von Fortschrittsbalken und Wasserfallflüssen von großem Nutzen.

Bei der Implementierung des Fortschrittsbalkens können die Funktionen „Resolve“ und „Done“ verwendet werden, um den Auslösezeitpunkt und die Auslöselogik zu definieren, wenn der Fortschrittsbalken auf 100 % gelesen wird. Die Funktionen „Benachrichtigung“ und „Fortschritt“ können verwendet werden, um den Auslösezeitpunkt und die Auslösung zu definieren Zeit des Fortschrittsbalkens während des Lesens. Die Ablehnungs- und Fehlerfunktionen können verwendet werden, um das Trigger-Timing und die Trigger-Logik zu definieren, wenn die Fortschrittslesung fehlschlägt.

Bei der Implementierung des Wasserfallflusses können die Funktionen „Resolve“ und „Done“ verwendet werden, um den Auslösezeitpunkt und die Auslöselogik zu definieren, wenn alle Daten in die Seite geladen wurden. Die Funktionen „Benachrichtigung“ und „Fortschritt“ können verwendet werden, um den Auslösezeitpunkt und die Auslösezeit zu definieren damit der Wasserfallfluss die nächste Seite liest.