摘要：原文地址定義是針對異步編程的一種解決方案，能夠抽象處理異步對象以及對其進行操作。當狀態由時執行已完成的回調函數，由時，調用失敗的回調函數。所以，可以在自行使用，保證執行不會出錯，或者使用其他異步編程方式。異步編程的方案后續學習再補充

原文地址

Promise是針對異步編程的一種解決方案，能夠抽象處理異步對象以及對其進行操作。Promise并不是Javascript語言的擴展，只是在ES6中將其寫進了語言標準，原生Javascript提供了Promise對象，統一了用法。

可以在一定程度上優化回調地獄問題，當需要控制多個異步操作時，代碼結構更加清晰，便于理解。

提供統一的API，書寫更加規范，便于維護，便于控制異步操作。

一個 Promise 對象代表一個目前還不可用，但是在未來的某個時間點可以被解析的值。

可以理解為Promise能夠以同步的方式編寫異步代碼，但是有更優的解決方式。

Promise的狀態

Promise對象存在三種狀態：pending、fulfilled、rejected。其中pending 狀態最終一定會變為fulfilled或者是rejected中的一種，且不會再發生改變。整個過程由Promise機制保證不會受到外界干擾。當狀態由pending->fulfilled時執行已完成的回調函數，由pending->rejected時，調用失敗的回調函數。一旦狀態改變，就不會再被修改而一直保持這個狀態。

實例方法

Promise#then

Promise#catch

靜態方法

Promise.resolve

Promise.reject

Promise.all

Promise.race

大家常說Javascript是單線程的語言，這固然是對的。這里的單線程是說，在JS引擎中負責解釋和執行JavaScript代碼的線程只有一個，每個特定的時刻只有特定的代碼被執行，并阻塞其他代碼。換句話說，JavaScript是單線程，但是瀏覽器是多線程的。除了負責解析JS代碼之外，還存在其他線程，負責HTTP請求，DOM處理等等。

同步可以理解成在一個函數返回時，我就拿到了需要的結果，無需等待。異步則是函數返回時，我沒有得到應該得到的結果，而且要在未來某一時間才能得到。程序執行的順序和任務執行的順序并不始終保持一致。

常見的操作有接口請求，文件讀取，定時器操作等。在瀏覽器端耗時很長的操作，最好都異步執行。(鼠標點擊事件、窗口大小拖拉事件等也可以算是異步的)

關于Promise的狀態

promise對象的狀態，只有對象處于pending狀態時是可變的，一旦從Pending轉換為Fulfilled或Rejected之后， 這個promise對象的狀態就不會再發生任何變化。也就是說，Promise與Event等不同，在.then 后執行的函數可以肯定地說只會被調用一次，而且只會執行fulfilled或者rejected中的一個。

創建promise對象

一般情況下會使用new Promise創建對象，除此之外，也可以使用其他方法。

靜態方法Promise.resolve(value) 可以認為是new Promise()方法的快捷方式，同理Promise.reject(error)也是。

thenable對象&promise對象

thenable對象和promise對象并不是一回事，thenable對象可以理解為具有.then方法的對象。

可以通過Promise.resolve將thenable對象轉化為promise對象。

Promise鏈式調用

promise的鏈式調用可以通過使用.then處理回調函數比較多的情況，一定程度上解決回調地獄的問題。鏈式調用的原理（后續可以多帶帶介紹下）簡單來說是Promise內部有一個defers隊列存放事件，程序執行時.then將下個事件放入，promise狀態變化結束之后出發響應函數執行，然后將事件從隊列中移除。因為每一次調用.then時都會創建一個全新的promise對象，所以保證了鏈式調用可以順利執行。

鏈式調用的參數傳遞順序

demo1

前一個task的返回值作為后一個task的參數。不使用鏈式調用，直接調用.then方法時，由于每次都是新建的promise對象，所以value的值始終為100。

// 1: 對同一個promise對象同時調用 then 方法
var aPromise = new Promise(function (resolve) {
    resolve(100);
});
aPromise.then(function (value) {
    return value * 2;
});
aPromise.then(function (value) {
    return value * 2;
});
aPromise.then(function (value) {
    console.log("1: " + value); // => 100
})
// vs
// 2: 對 then 進行 promise chain 方式進行調用
var bPromise = new Promise(function (resolve) {
    resolve(100);
});
bPromise.then(function (value) {
    return value * 2;
}).then(function (value) {
    return value * 2;
}).then(function (value) {
    console.log("2: " + value); // => 100 * 2 * 2
});

鏈式調用多個task的執行順序

在鏈式調用過程中，每一個.then調用時候都會創建一個全新的promise對象，.then調用結束時會執行對應狀態的回調函數，

但是如果沒有傳入rejected的回調，或者.catch使用的位置不同，都會導致最后的結果不同。

demo2

task全部正常執行：

function taskA() {
    console.log("Task A");
}
function taskB() {
    console.log("Task B");
}
function onRejected(error) {
    console.log("Catch Error: A or B", error);
}
function finalTask() {
    console.log("Final Task");
}
var promise = Promise.resolve();
promise
    .then(taskA)
    .then(taskB)
    .catch(onRejected)
    .then(finalTask);

輸出結果為：

Task A
Task B
Final Task

當taskA執行失敗時：

function taskA() {
    console.log("Task A");
    throw new Error("throw Error @ Task A")
}

輸出結果為：

Task A
Error: throw Error @ Task A
Final Task

由于taskB中并沒有注冊rejected函數，所以taskB并未執行，而是直接通過catch捕獲到了失敗。

如果在taskB的then中傳入了失敗的回調：

promise
    .then(taskA)
    .then(taskB,function(error) {
        console.log("b-catch-error")
    })
    .catch(onRejected)
    .then(finalTask);

執行結果為：

Task A
b-catch-error
Final Task

所以，在多個.then鏈式調用時，不同位置報錯會導致task執行順序不同，執行不同，也許不符合預期。

所以，可以在自行使用try-catch，保證.then執行不會出錯，或者使用其他異步編程方式。

每一次調用.then，都會返回新的Promise對象

demo3

下面代碼中每一次返回的promise對象都不是同一個對象。

var aPromise = new Promise(function (resolve) {
    resolve(100);
});
var thenPromise = aPromise.then(function (value) {
    console.log(value);
});
var catchPromise = thenPromise.catch(function (error) {
    console.error(error);
});
console.log(aPromise !== thenPromise); // => true
console.log(thenPromise !== catchPromise);// => true

理解了這個再來看下面的問題。

demo4 錯誤的調用

function badAsyncCall() {
    var promise = Promise.resolve();
    promise.then(function() {
        // 任意處理
        return 1;
    });
    return promise;
}

demo5 正確的調用

function anAsyncCall() {
    var promise = Promise.resolve();
    return promise.then(function() {
        // 任意處理
        return 1;
    });
}

返回結果

demo4中return 的promise并不是執行過.then的promise，所以并沒有返回預期的結果。在實際開發中要注意這個問題。

rejected并不一定會捕獲到異常

但看這個字面上可能會有些疑惑，實際上還是概念上的問題。

使用promise.then(Fulfilled, Rejected)的話，在Fulfilled 中發生異常的話，在Rejected中是捕獲不到這個異常的。原因是promise狀態只能從pending變成fulfilled或者是rejected，且變化完成之后不會再被修改。所以一旦執行了fulfilled，說明promise成功了，此時就已經不會再執行rejected了。

promise 不要在異步和同步混合使用

demo6

function onReady(fn) {
    var readyState = document.readyState;
    if (readyState === "interactive" || readyState === "complete") {
        fn();
    } else {
        window.addEventListener("DOMContentLoaded", fn);
    }
}
onReady(function () {
    console.log("DOM fully loaded and parsed");
});
console.log("==Starting==");

如果這段代碼在源文件中出現的位置不同，在控制臺上打印的log消息順序也會不同。 結果不可控這是極力要避免的。

正確的寫法應該是：

function onReadyPromise() {
    return new Promise(function (resolve, reject) {
        var readyState = document.readyState;
        if (readyState === "interactive" || readyState === "complete") {
            resolve();
        } else {
            window.addEventListener("DOMContentLoaded", resolve);
        }
    });
}
onReadyPromise().then(function () {
    console.log("DOM fully loaded and parsed");
});
console.log("==Starting==");

為了避免上述中同時使用同步、異步調用可能引起的混亂問題，Promise在規范上規定 Promise只能使用異步調用方式 。

異步編程的方案

（后續學習再補充）