javascript非同步程式碼書寫規格Promise學習筆記_javascript技巧

最近工作輕鬆了一點，想起了以前總是看到的一個單字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已經全部講完，大家現在就可以把它用在自己的專案中了，另外提早給大家拜個早年，祝大家羊年洋洋得意^ ^。