Promise 的理解

Promise 爲ES6提供的特性。

Promise 對象有以下兩個特點:

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

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

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

2、一旦狀態改變，就不會再變，任何時候都可以得到這個結果。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) { 
    // 處理前兩個回調函數的錯誤 
});

---