濃縮的就是精華——ES6 Promise

ECMAscript 6 原生提供了 Promise 對象。
Promise 對象表明了將來將要發生的事件，用來傳遞異步操做的消息。

Promise 對象有如下兩個特色:

一、對象的狀態不受外界影響。Promise 對象表明一個異步操做，有三種狀態：

• pending: 初始狀態，不是成功或失敗狀態。
• fulfilled: 意味着操做成功完成。
• rejected: 意味着操做失敗。

只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其餘手段沒法改變。

二、一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。

Promise 對象的狀態改變，只有兩種可能：從 Pending 變爲 Resolved 和從 Pending 變爲 Rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會當即獲得這個結果。這與事件（Event）徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。

Promise 優缺點

有了 Promise 對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操做更加容易。

Promise 也有一些缺點。首先，沒法取消 Promise，一旦新建它就會當即執行，沒法中途取消。其次，若是不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

Promise 建立

要想建立一個 promise 對象、可使用 new 來調用 Promise 的構造器來進行實例化。
下面是建立 promise 的步驟：

var promise = new Promise(function(resolve, reject) {
    // 異步處理    
    // 處理結束後、調用resolve 或 reject 
});

Promise 構造函數包含一個參數和一個帶有 resolve（解析）和 reject（拒絕）兩個參數的回調。在回調中執行一些操做（例如異步），若是一切都正常，則調用 resolve，不然調用 reject。

實例

var myFirstPromise = new Promise(function(resolve, reject){
    // 當異步代碼執行成功時，咱們纔會調用resolve(...), 
    // 當異步代碼失敗時就會調用reject(...)
    // 在本例中，咱們使用setTimeout(...)來模擬異步代碼
    // 實際編碼時多是XHR請求或是HTML5的一些API方法.    
    setTimeout(function(){
        resolve("成功!"); //代碼正常執行！
    }, 250); 
});  
myFirstPromise.then(function(successMessage){
    //successMessage的值是上面調用resolve(...)方法傳入的值.    
    //successMessage參數不必定非要是字符串類型，這裏只是舉個例子
    document.write("Yay! " + successMessage); 
});

對於已經實例化過的 promise 對象能夠調用 promise.then() 方法，傳遞 resolve 和 reject 方法做爲回調。

promise.then() 是 promise 最爲經常使用的方法。

promise.then(onFulfilled, onRejected)

promise簡化了對error的處理，上面的代碼咱們也能夠這樣寫：

promise.then(onFulfilled).catch(onRejected)

---

Promise Ajax

下面是一個用 Promise 對象實現的 Ajax 操做的例子。

function ajax(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function () {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
var URL = "/try/ajax/testpromise.php";
ajax(URL).then(function onFulfilled(value){
    document.write('內容是：' + value);
}).catch(function onRejected(error){
    document.write('錯誤：' + error);
});

上面代碼中，resolve 方法和 reject 方法調用時，都帶有參數。它們的參數會被傳遞給回調函數。

reject 方法的參數一般是 Error 對象的實例，而 resolve 方法的參數除了正常的值之外，還多是另外一個 Promise 實例，好比像下面這樣。

var p1 = new Promise(function(resolve, reject){
    // ... some code
});
var p2 = new Promise(function(resolve, reject){
    // ... some code  resolve(p1);
})

上面代碼中，p1 和 p2 都是 Promise 的實例，可是 p2 的 resolve 方法將 p1 做爲參數，這時 p1 的狀態就會傳遞給 p2。若是調用的時候，p1 的狀態是 pending，那麼 p2 的回調函數就會等待 p1 的狀態改變；若是 p1 的狀態已是 fulfilled 或者 rejected，那麼 p2 的回調函數將會馬上執行。

---

Promise.prototype.then方法：鏈式操做

Promise.prototype.then 方法返回的是一個新的 Promise 對象，所以能夠採用鏈式寫法。

getJSON("/posts.json").then(function(json) {
    return json.post;
}).then(function(post) {
    // proceed
});

上面的代碼使用 then 方法，依次指定了兩個回調函數。第一個回調函數完成之後，會將返回結果做爲參數，傳入第二個回調函數。

若是前一個回調函數返回的是Promise對象，這時後一個回調函數就會等待該Promise對象有了運行結果，纔會進一步調用。

getJSON("/post/1.json").then(function(post) {
    return getJSON(post.commentURL);
}).then(function(comments) {
    // 對comments進行處理
});

這種設計使得嵌套的異步操做，能夠被很容易得改寫，從回調函數的"橫向發展"改成"向下發展"。

---

Promise.prototype.catch方法：捕捉錯誤

Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的別名，用於指定發生錯誤時的回調函數。

getJSON("/posts.json").then(function(posts) {
    // some code
}).catch(function(error) {
    // 處理前一個回調函數運行時發生的錯誤
    console.log('發生錯誤！', error);
});

Promise 對象的錯誤具備"冒泡"性質，會一直向後傳遞，直到被捕獲爲止。也就是說，錯誤老是會被下一個 catch 語句捕獲。

getJSON("/post/1.json").then(function(post) {
    return getJSON(post.commentURL);
}).then(function(comments) {
    // some code
}).catch(function(error) {
    // 處理前兩個回調函數的錯誤
});

---

Promise.all方法，Promise.race方法

Promise.all 方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例。

var p = Promise.all([p1,p2,p3]);

上面代碼中，Promise.all 方法接受一個數組做爲參數，p一、p二、p3 都是 Promise 對象的實例。（Promise.all 方法的參數不必定是數組，可是必須具備 iterator 接口，且返回的每一個成員都是 Promise 實例。）

p 的狀態由 p一、p二、p3 決定，分紅兩種狀況。

• 只有p一、p二、p3的狀態都變成fulfilled，p的狀態纔會變成fulfilled，此時p一、p二、p3的返回值組成一個數組，傳遞給p的回調函數。
• 只要p一、p二、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

下面是一個具體的例子。

// 生成一個Promise對象的數組 
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
    return getJSON("/post/" + id + ".json");
});
Promise.all(promises).then(function(posts) {
    // ...
}).catch(function(reason){
    // ...
});

Promise.race 方法一樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。

var p = Promise.race([p1,p2,p3]);

上面代碼中，只要p一、p二、p3之中有一個實例率先改變狀態，p的狀態就跟着改變。那個率先改變的Promise實例的返回值，就傳遞給p的返回值。

若是Promise.all方法和Promise.race方法的參數，不是Promise實例，就會先調用下面講到的Promise.resolve方法，將參數轉爲Promise實例，再進一步處理。

---

Promise.resolve 方法，Promise.reject 方法

有時須要將現有對象轉爲Promise對象，Promise.resolve方法就起到這個做用。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代碼將 jQuery 生成 deferred 對象，轉爲一個新的 ES6 的 Promise 對象。

若是 Promise.resolve 方法的參數，不是具備 then 方法的對象（又稱 thenable 對象），則返回一個新的 Promise 對象，且它的狀態爲fulfilled。

var p = Promise.resolve('Hello');
p.then(function (s){
    console.log(s)
}); 
// Hello

上面代碼生成一個新的Promise對象的實例p，它的狀態爲fulfilled，因此回調函數會當即執行，Promise.resolve方法的參數就是回調函數的參數。

若是Promise.resolve方法的參數是一個Promise對象的實例，則會被原封不動地返回。

Promise.reject(reason)方法也會返回一個新的Promise實例，該實例的狀態爲rejected。Promise.reject方法的參數reason，會被傳遞給實例的回調函數。

var p = Promise.reject('出錯了');
p.then(null, function (s){
    console.log(s)
});
// 出錯了

上面代碼生成一個Promise對象的實例p，狀態爲rejected，回調函數會當即執行。