最近工作輕松了點,想起了以前總是看到的一個單詞promise,於是耐心下來學習了一下。
一:Promise是什麼?為什麼會有這個東西?
首先說明,Promise是為了解決javascript異步編程時候代碼書寫的方式產生的。
隨著javascript的發展,異步的場景越來越多。前端有AJAX,setTimeout等,後端Node異步更多。按照傳統的做法,那麼就是各種回調嵌回調。代碼可以把人繞暈。
這個時候,CommonJS社區提出了一個叫做Promise/A+的規范,這個規范定義了如何書寫異步代碼,包括使用when/then/resolve等來組織異步的代碼。
這個規范由於很優雅,所以相繼就有很多人實現了這個規范,其中包括 浏覽器原生支持的Promise(), jQuery裡面的deferred,when.js等。
因為這幾個庫都符合該規范,所以學習一個也就可以了。我主要學習了jQuery的deferred,所以本文主要講講這個實現。
二:jQuery的deferred
首先,關於deferred對象,阮一峰老師有篇文章寫的很詳細了,地址點這。建議可以先看看他的那篇文章,再繼續往下看。
上面說過,promise是為了解決異步(比如ajax)的,那麼我們來對比下他們的區別。
經典的jQuery的AJAX的寫法是
復制代碼 代碼如下:
$.ajax({
type: "get",
url: "",
success: function () {},
error; function () {}
});
其中success和error參數便是成功/失敗時候的回調函數。
而現在jQuery的AJAX寫法成了
復制代碼 代碼如下:
$.ajax({
type; "get",
url: ""
}).done(function () {}).fail(function () {});
其中成功後會調用done裡面的函數,失敗便會調用fail裡面的函數。
看到這裡也許你就會有疑問了,done/fail這些方法是哪個對象上的?$.ajax()返回了什麼對象,為什麼有這兩個方法?
答案就在下面介紹的Deferred對象。
jQuery提供了一種新的類型Deferred。通過$.Deferred()來生成。例如
復制代碼 代碼如下:
var def = $.Deferred();
這個def繼承了很多方法,有done/fail/resolve/reject等。
所以這裡我們也就知道,上面$.ajax()其實返回的也就是這個對象。
deferred對象有很多方法,這裡介紹幾種常用的,更多的可以參考 API
首先自然是生成一個def對象。這裡有很多方法,比如:
復制代碼 代碼如下:
var def = $.Deferred(); // 自己生成
$.ajax({}); // ajax方法返回的也是def對象
$.when(); // when方法也會返回一個def對象
這裡,$.when()可以單獨講講,這個方法通常接收一個或多個deferred對象,然後根據這些deferred對象的狀態情況,來決定$.when()返回的對象的狀態。其中有個使用場景就是多個ajax請求,如果其中一個失敗就都算失敗,那麼便可以在$.when()中傳入多個ajax方法,例如$.when($.ajax(), $.ajax())。然後$.when會返回一個def對象(根據這兩個請求結果的來判斷)。
接著得到了def對象,便有了一系列改變這個對象狀態的方法
復制代碼 代碼如下:
def.resolve(); // 把def對象設置成已經完成,然後便會立刻執行綁定在def.done()裡面的函數。
def.reject(); // 把def對象設置成已經失敗,然後便會立刻執行綁定在def.fail()裡面的函數。
def.notify(); // def對象執行中,對應的回調是def.progress()。
緊接著是設置回調的方法,順序和上面的對應,也就是什麼狀態會調用到什麼回調
復制代碼 代碼如下:
def.done(); // 對應def.resolve();
def.fail(); // 對應def.reject();
def.progress(); // 對應 def.notify();
// 特殊的
def.always(); // 成功或者失敗都會調用
def.then(); // 接受多個函數,按順序依次是成功(done),失敗(fail)和進行中(progress)
其實到這裡位置,deferred對象的用法也就差不多了。不過jQuery還提供了幾個API
復制代碼 代碼如下:
// 檢查當前狀態類
def.isRejected();
def.isResolved();
def.state();
這幾個api顧名思義,就不具體講了,具體可以查看上面給的jQuery API文檔。
還有一個方法,就是有時候我們希望給外部一個def對象,然後這個對象可以設置各種狀態的回調,但是不能改變它的狀態,那麼就可以用
復制代碼 代碼如下:
def.promise();
返回一個promiese對象,是deferred對象的子集,可以用done/fail等方法,沒有resolve/reject等方法,主要是為了保護不讓外部去修改def對象的狀態。
至此,關於promise已經全部講完,大家現在就可以把它用在自己的項目中了,另外提早給大家拜個早年,祝大家羊年洋洋得意^ ^。