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

原文地址

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

可以在一定程度上優(yōu)化回調(diào)地獄問題，當(dāng)需要控制多個異步操作時，代碼結(jié)構(gòu)更加清晰，便于理解。

提供統(tǒng)一的API，書寫更加規(guī)范，便于維護，便于控制異步操作。

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

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

Promise的狀態(tài)

Promise對象存在三種狀態(tài)：pending、fulfilled、rejected。其中pending 狀態(tài)最終一定會變?yōu)閒ulfilled或者是rejected中的一種，且不會再發(fā)生改變。整個過程由Promise機制保證不會受到外界干擾。當(dāng)狀態(tài)由pending->fulfilled時執(zhí)行已完成的回調(diào)函數(shù)，由pending->rejected時，調(diào)用失敗的回調(diào)函數(shù)。一旦狀態(tài)改變，就不會再被修改而一直保持這個狀態(tài)。

實例方法

Promise#then

Promise#catch

靜態(tài)方法

Promise.resolve

Promise.reject

Promise.all

Promise.race

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

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

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

關(guān)于Promise的狀態(tài)

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

創(chuàng)建promise對象

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

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

thenable對象&promise對象

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

可以通過Promise.resolve將thenable對象轉(zhuǎn)化為promise對象。

Promise鏈?zhǔn)秸{(diào)用

promise的鏈?zhǔn)秸{(diào)用可以通過使用.then處理回調(diào)函數(shù)比較多的情況，一定程度上解決回調(diào)地獄的問題。鏈?zhǔn)秸{(diào)用的原理（后續(xù)可以多帶帶介紹下）簡單來說是Promise內(nèi)部有一個defers隊列存放事件，程序執(zhí)行時.then將下個事件放入，promise狀態(tài)變化結(jié)束之后出發(fā)響應(yīng)函數(shù)執(zhí)行，然后將事件從隊列中移除。因為每一次調(diào)用.then時都會創(chuàng)建一個全新的promise對象，所以保證了鏈?zhǔn)秸{(diào)用可以順利執(zhí)行。

鏈?zhǔn)秸{(diào)用的參數(shù)傳遞順序

demo1

前一個task的返回值作為后一個task的參數(shù)。不使用鏈?zhǔn)秸{(diào)用，直接調(diào)用.then方法時，由于每次都是新建的promise對象，所以value的值始終為100。

// 1: 對同一個promise對象同時調(diào)用 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 方式進行調(diào)用
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
});

鏈?zhǔn)秸{(diào)用多個task的執(zhí)行順序

在鏈?zhǔn)秸{(diào)用過程中，每一個.then調(diào)用時候都會創(chuàng)建一個全新的promise對象，.then調(diào)用結(jié)束時會執(zhí)行對應(yīng)狀態(tài)的回調(diào)函數(shù)，

但是如果沒有傳入rejected的回調(diào)，或者.catch使用的位置不同，都會導(dǎo)致最后的結(jié)果不同。

demo2

task全部正常執(zhí)行：

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);

輸出結(jié)果為：

Task A
Task B
Final Task

當(dāng)taskA執(zhí)行失敗時：

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

輸出結(jié)果為：

Task A
Error: throw Error @ Task A
Final Task

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

如果在taskB的then中傳入了失敗的回調(diào)：

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

執(zhí)行結(jié)果為：

Task A
b-catch-error
Final Task

所以，在多個.then鏈?zhǔn)秸{(diào)用時，不同位置報錯會導(dǎo)致task執(zhí)行順序不同，執(zhí)行不同，也許不符合預(yù)期。

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

每一次調(diào)用.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 錯誤的調(diào)用

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

demo5 正確的調(diào)用

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

返回結(jié)果

demo4中return 的promise并不是執(zhí)行過.then的promise，所以并沒有返回預(yù)期的結(jié)果。在實際開發(fā)中要注意這個問題。

rejected并不一定會捕獲到異常

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

使用promise.then(Fulfilled, Rejected)的話，在Fulfilled 中發(fā)生異常的話，在Rejected中是捕獲不到這個異常的。原因是promise狀態(tài)只能從pending變成fulfilled或者是rejected，且變化完成之后不會再被修改。所以一旦執(zhí)行了fulfilled，說明promise成功了，此時就已經(jīng)不會再執(zhí)行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==");

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

正確的寫法應(yīng)該是：

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==");

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

異步編程的方案

（后續(xù)學(xué)習(xí)再補充）