Die Rolle der Promise- und Deferred-Objekte von jQuery in asynchronen Callbacks

1. Vorwort

Um Frontends aus der Hölle der Rückrufe zurück in den Himmel zu holen, hat jQuery auch das Konzept von Promise eingeführt. Promise ist eine Abstraktion, die das asynchrone Verhalten von Code eleganter macht. Damit können wir asynchronen Code genauso schreiben wie synchronen Code. jQuery hat die CommonJS Promise/A-Spezifikation seit Version 1.5 als Schwergewichtslösung implementiert, sie wird jedoch nicht strikt gemäß der Spezifikation implementiert und es gibt einige API-Unterschiede.

Okay, werfen wir einen Blick auf ihre Funktionen (die Beispiele in diesem Artikel basieren auf JQuery-Version 1.8 oder höher).

2. Beispiel

Beim Schreiben von Animationen haben wir in der Vergangenheit normalerweise Folgendes gemacht:

$('.animateEle').animate({
 opacity:'.5'
}, 4000,function(){
 $('.animateEle2').animate({
  width:'100px'
 },2000,function(){
  // 这样太伤了
  $('.animateEle3').animate({
   height:'0'
  },2000);
 });
});

Nach dem Login kopieren

Es wäre zu schädlich, wenn Rückrufe auf diese Weise verwendet würden. Glücklicherweise gibt es einige sofort einsatzbereite Promise-Lösungen, die dieses Problem elegant lösen.

Sehen wir uns die von jQuery bereitgestellte Lösung an.

var animate1 = function() {
 return $('.animateEle1').animate({opacity:'.5'},4000).promise();
};
var animate2 = function() {
 return $('.animateEle2').animate({width:'100px'},2000).promise();
};
var animate3 = function(){
 return $('.animateEle3').animate({height:'0'},2000).promise();
};
// so easy,有木有，so clear，有木有
$.when(animate1()).then(animate2).then(animate3);

Nach dem Login kopieren

Offensichtlich ist der geänderte Code einfacher zu verstehen und zu lesen.

Im obigen Code werden jedoch einige Details nicht offengelegt. Wenn Sie nicht aufpassen, können Sie leicht Fehler machen und die Animation nicht in der von uns gewünschten Reihenfolge ausführen. Lassen Sie uns die von jQuery bereitgestellten Methoden für versprochene und verzögerte Objekte vollständig verstehen und sehen, wie sie verwendet werden.

3. Promise- und Deferred-Object-Methoden

Das Versprechensobjekt ist eigentlich ein Sonderfall des verzögerten Objekts, da das Versprechensobjekt den asynchronen Zustand nicht ändern kann, das verzögerte Objekt jedoch. Dies spiegelt sich deutlich in ihrem Methodendesign wider.

1.Promise-Objektmethode

Normalerweise können wir für DOM-, Animations- und Ajax-bezogene Methoden die Promise-Methode verwenden. Der Aufruf der Promise-Methode gibt ein Promise-Objekt zurück. Promise-Methoden können in einer Kette aufgerufen werden.

Es gibt drei gängige Methoden für Versprechensobjekte: erledigt, fehlgeschlagen und dann.

Vergessen Sie nicht die anderen Methoden. Es gibt zu viele Schnittstellenmethoden in jquery, die meiner Meinung nach ziemlich ausführlich sind. Genau wie die frühen Ereignismethoden sind „Live“, „Delegate“ und „Bind“ letztendlich nicht alle klassifiziert. Ist jemand hier, um sich darum zu kümmern?

Codebeispiel wie folgt:

(1) DOM verwendet die Promise-Methode:

var box=$('#box');
box.promise().done(function(ele){
  console.log(ele);//jQuery box
});

Nach dem Login kopieren

(2) Ajax verwendet die Promise-Methode (gibt standardmäßig ein Promise-Objekt zurück, sodass die Promise-Methode nicht explizit aufgerufen werden muss):

$.post('/',{}).done(function(data){
  console.log('请求成功');
}).fail(function(){
  console.log('请求错误');
});

Nach dem Login kopieren

Das Animationsbeispiel existiert bereits, daher werde ich es nicht noch einmal auflisten.

2.Deferred-Object-Methode

Was ist also der Unterschied zwischen Deferred und Promise? Wie Sie bereits gesehen haben, ist ein Versprechen ein Objekt, das von einer asynchronen Funktion zurückgegeben wird. Wenn Sie eine solche Funktion selbst schreiben möchten, müssen Sie eine verzögerte Funktion verwenden.

Ein verzögertes Objekt kann das Gleiche tun wie ein Promise-Objekt, verfügt jedoch über zwei Funktionen zum Auslösen der Funktionen done() und fail().

Ein zurückgestelltes Objekt verfügt über die Funktion „resolve()“, um ein erfolgreiches Ergebnis zu verarbeiten und Funktionen im Zusammenhang mit done() auszuführen. Die Funktion „reject()“ wird verwendet, um fehlgeschlagene Ergebnisse zu verarbeiten und Funktionen im Zusammenhang mit fail() auszuführen.

Sie können Parameter sowohl für die Funktionen „resolve()“ als auch „reject()“ bereitstellen, und dann werden beide an die Rückruffunktionen übergeben, die sich auf done() und fail() beziehen.

Promise-Objekte verfügen nicht über die Funktionen „resolve()“ und „reject()“. Dies liegt daran, dass Sie das Versprechen in ein anderes Skript einfügen und nicht möchten, dass das Versprechen ein Versprechen auflöst oder ablehnt.

Das Folgende ist ein einfaches Beispiel für eine Verzögerung. Der HTML-Code ist nur ein einfaches leeres Div mit dem ID-Attribut „result“.

$('#result').html('waiting...');

var promise = wait();
promise.done(result);

function result() {
 $('#result').html('done');
}

function wait() {
 var deferred = $.Deferred();

 setTimeout(function() {
  deferred.resolve();
 }, 2000);

 return deferred.promise();
}

Nach dem Login kopieren

Unter anderem gibt die Funktion wait() ein Versprechen zurück. Es wird nach 2 Sekunden analysiert. Zusätzlich zu setTimeout kann auf diese Weise alles in asynchronen Funktionen verwendet werden, z. B. Animationen, Web-Worker usw. Der Code in der Funktion wait() sollte klar sein. Wir verwenden ein verzögertes Objekt, geben aber ein eingeschränktes Versprechensobjekt zurück.

Für verzögerte Objekte, also Objekte, die mit den Methoden $.Deferred() und $.when() erstellt wurden, gibt es die folgenden häufig verwendeten Methoden:

resolve , reject , notify ;
done , fail , progress ;

Nach dem Login kopieren

Es gibt auch Promise-, Then- und Always-Methoden.

Der Grund, warum sie so formatiert sind, liegt darin, dass sie korrespondieren, das heißt: Die Auflösungsmethode löst den Rückruf „Done“ aus, „Reject“ löst den Rückruf „Fail“ aus und „Notify“ löst den Rückruf „Fortschritt“ aus.

Sehen Sie sich den Code direkt an:

var wait = function(ms) {
 var dtd = $.Deferred();
 setTimeout(dtd.resolve, ms);
 // setTimeout(dtd.reject, ms);
 // setTimeout(dtd.notify, ms);
 return dtd.promise(); //此处也可以直接返回dtd
};

wait(2500).done(function() {
 console.log('haha,师太，你可让老衲久等了');
}).fail(function() {
 console.log('失败了');
}).progress(function(res) {
 console.log('等待中...');
});

Nach dem Login kopieren

我们看到了，上面的代码中，在 wait 函数中，返回的是个 promise 对象，而不是 deferred 对象。

要知道， promise 对象是没有 resolve , reject , notify 等方法的，也就意味着，你无法针对 promise 对象进行状态更改，只能在 done 或 fail 中进行回调配置。所以，你如果这么调用 wait(2500).resolve() 将会报错，因为 wait(2500) 返回的是个 promise 对象，不存在 resolve 方法。

但是，这么做，有个好处，我们把 dtd 这个 deferred 对象放在了 wai t函数中，作为了局部变量，避免了全局的污染；进一步通过 promise 方法，转化 dtd 这个 deferred 对象为 promise 对象，避免了函数 wait 外部可能发生的状态更改（假如我们确实有这个需求）。

比如：

var wait = function(ms) {
 var dtd = $.Deferred();
 setTimeout(dtd.resolve, ms);
 // setTimeout(dtd.reject, ms);
 // setTimeout(dtd.notify, ms);
 return dtd; //此处也可以直接返回dtd
};

wait(2500).reject().fail(function(){
 console.log('失败了...............');
});

Nach dem Login kopieren

我们在外部更改了 wait 返回的 deferred 对象的状态，这样必然触发该对象的 fail 回调函数。

对于 always 方法，从字面意思上就很容易理解， deferred 对象无论是 resolve 还是 reject ，都会触发该方法的回调。

3.其它共性

此处讲讲 then 和 $.when 方法的使用。它们对 promise 对象也适用。

$.when 方法接受多个 deferred 对象或者纯javascript对象，返回 promise 对象。
then 方法依次接受三个回调，分别为 deferred 对象 resolve , reject , notify 后触发的回调，返回一个 promise 对象。注意，必须传入函数，而该函数只有返回一个 promise 对象，才能够让异步事件按照预期顺序来执行。
我们来看看最开始的动画示例代码， $.when(animate1()).then(animate2).then(animate3) ， $.when 方法中接受了一个 animate1 的函数执行结果，也就是得到了一个 promise 对象，而后的 then 中，则只是接受了一个变量名，这样得到的结果是一个匿名的函数体，而该函数中返回的是 promise 对象。正好符合了我们对 then 接受参数的要求。

假如我们把执行语句改成： $.when(animate1()).then(animate2()).then(animate3()) ，这样造成的结果就是三个动画同步执行了。与 $.when(animate1(),animate2(),animate3()) 无异。

既然 then 是如此要求，那么与 then 方法类似的 done , fail , progress 也是一样的。