JavaScript異步編程（三） Promise和Deferred對象

Promise和Deferred對象

 

如今jQuery中全部的Ajax函數多會返回Promise對象。

Promise對象表明一項有兩種可能結果（成功或失敗），並持有多個回調。

之前：

$.get(url, {

    success: onSuccess,

    failure: onFailure,

    always: onAlways

});

如今

var promise = $.get(url);

promise.done(onSuccess);

promise.fail(onFailure);

promise.always(onAlways);

 

變化：如今是在觸發Ajax調用以後再附加回調的。

好處：實現封裝。Ajax調用部分的代碼分離，再也不像之前同樣去處理以後的事情。

 

Promise對象也和EventEmitter對象同樣，容許向同一個事件綁定任意多的處理器；

Promise對象最大優點在於，能夠從現有Promise對象派生出新的Promise對象。

 

生成Promise對象

Deferred是Promise的超集，它比Promise多了一項關鍵特性：可直接觸發。

純Promise實例只容許添加多個調用，且必須由其餘東西來觸發這些調用。

而使用resolve和reject方法都可觸發Deferred對象。

 

var deferred = new $.Deferred();

deferred.always(function() {…});

deferred.done(function() {…});

deferred.fail(function() {…});

 

$(‘#palyGame’).focus().on(‘keypress’, function(e) {

    var Y = 121, N = 110;

    if(e.keyCode === Y) {

    deferred.resolve();

} else if(e.keyCode ===N ) {

    deferred.reject();

} else {

    return false;

}

});

 

Promise 只能執行或拒絕一次，以後就失效了。

咱們斷言，Promise 對象會一直保持掛起狀態，直到被執行或拒絕。

 

生成純Promise對象

Deferred對象調用promise()方法便可；

每一個Deferred對象都含有一個Promise對象，而每一個Promise對象都表明着一個Deferred對象。有了Deferred對象，就能夠控制其狀態，而有了純Promise對象，只能讀取其狀態及附加回調。

 

執行或拒絕Deferred對象時，提供的任何參數都會轉發到相應的回調。

 

進度通知

var nanowrimoing = $.Deferred();

var wordGoal = 20;

nanowrimoing.progress(function(wordCount) {

    var percentComplete = Math.floor(wordCount/wordGoal *100);

    $('#indicator').text(percentComplete + '% complete');

});

nanowrimoing.done(function() {

    $('#indicator').text('Good job!');

});

 

$('#editor').on('keypress', function() {

    var wordCount = $(this).val().length + 1;

    if(wordCount >= wordGoal) {

    nanowrimoing.resolve();

}

nanowrimoing.notify(wordCount);

});

 

Promise 對象接受3 種回調形式：done、fail 和progress。

執行Promise 對象時，運行的是done 回調；

拒絕Promise對象時，運行的是fail 回調；

對處於掛起狀態的Deferred 對象調用notify 時，運行的是progress 回調。

 

Promise對象的合併

$.when();

 

管道鏈接

JavaScript沒法便捷地執行一系列異步任務，一個主要緣由是沒法再第一個任務結束以前就向第二個任務附加處理器。

var getPromise = $.get('/query');

getPromise.done(function(data) {

var postPromise = $.post('/search', data);

});

// 如今咱們想給postPromise 附加處理器……

在GET 操做成功以前咱們沒法對postPromise對象綁定回調，

由於這時postPromise 對象還不存在。

解決方案：

var getPromise = $.get('/query');

var postPromise = getPromise.pipe(function(data) {

return $.post('/search', data);

});

pipe 最多能接受3個參數，它們對應着Promise 對象的3 種回調類型：done、fail 和progress。