Javascript - Promise學習筆記

最近工做輕鬆了點，想起了之前老是看到的一個單詞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已經所有講完，你們如今就能夠把它用在本身的項目中了，另外提前給你們拜個早年，祝你們羊年洋洋得意^ ^。

 

 

 

轉載本站文章請註明做者和出處  奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途