摘要：一般會(huì)這樣去寫要在第一個(gè)請(qǐng)求成功后才可以執(zhí)行下一步這樣的寫法的原理是，當(dāng)執(zhí)行一些異步操作時(shí)，我們需要知道操作是否已經(jīng)完成，所有當(dāng)執(zhí)行完成的時(shí)候會(huì)返回一個(gè)回調(diào)函數(shù)，表示操作已經(jīng)完成。

開篇首先設(shè)想一個(gè)日常開發(fā)常常會(huì)遇到的需求：在多個(gè)接口異步請(qǐng)求數(shù)據(jù)，然后利用這些數(shù)據(jù)來(lái)進(jìn)行一系列的操作。一般會(huì)這樣去寫：

$.ajax({
    url: "......",
    success: function (data) {
        $.ajax({
            // 要在第一個(gè)請(qǐng)求成功后才可以執(zhí)行下一步
            url: "......",
            success: function (data) {
                 // ......
            }
        });
    }
});

這樣的寫法的原理是，當(dāng)執(zhí)行一些異步操作時(shí)，我們需要知道操作是否已經(jīng)完成，所有當(dāng)執(zhí)行完成的時(shí)候會(huì)返回一個(gè)回調(diào)函數(shù)，表示操作已經(jīng)完成。

使用回調(diào)函數(shù)的形式理解起來(lái)并不困難，但是實(shí)際的應(yīng)用當(dāng)中會(huì)有以下的缺點(diǎn)：

在需要多個(gè)操作的時(shí)候，會(huì)導(dǎo)致多個(gè)回調(diào)函數(shù)嵌套，導(dǎo)致代碼不夠直觀，就是常說(shuō)的 Callback Hell。

如果幾個(gè)異步操作之間并沒有前后順序之分（例如不需要前一個(gè)請(qǐng)求的結(jié)果作為后一個(gè)請(qǐng)求的參數(shù)）時(shí)，同樣需要等待上一個(gè)操作完成再實(shí)行下一個(gè)操作。

為了解決上述的問(wèn)題，Promise 對(duì)象應(yīng)運(yùn)而生，在 EMCAScript 2015 當(dāng)中已經(jīng)成為標(biāo)準(zhǔn)。

一個(gè) Promise 對(duì)象可以理解為一次將要執(zhí)行的操作（常常被用于異步操作），使用了 Promise 對(duì)象之后可以用一種鏈?zhǔn)秸{(diào)用的方式來(lái)組織代碼，讓代碼更加直觀。而且由于 Promise.all 這樣的方法存在，可以讓同時(shí)執(zhí)行多個(gè)操作變得簡(jiǎn)單。接下來(lái)就來(lái)簡(jiǎn)單介紹 Promise 對(duì)象。

首先來(lái)看一段使用了 Promise 對(duì)象的代碼。

function helloWorld (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello World!");
        } else {
            reject("Good bye!");
        }
    });
}

helloWorld(true).then(function (message) {
    alert(message);
}, function (error) {
    alert(error);
});

jsFiddle(請(qǐng)用現(xiàn)代瀏覽器打開)

上面的代碼實(shí)現(xiàn)的功能非常簡(jiǎn)單，helloWord 函數(shù)接受一個(gè)參數(shù)，如果為 true 就打印 "Hello World!"，如果為 false 就打印錯(cuò)誤的信息。helloWord 函數(shù)返回的是一個(gè) Promise 對(duì)象。

在 Promise 對(duì)象當(dāng)中有兩個(gè)重要方法————resolve 和 reject。

resolve 方法可以使 Promise 對(duì)象的狀態(tài)改變成成功，同時(shí)傳遞一個(gè)參數(shù)用于后續(xù)成功后的操作，在這個(gè)例子當(dāng)中就是 Hello World! 字符串。

reject 方法則是將 Promise 對(duì)象的狀態(tài)改變?yōu)槭。瑫r(shí)將錯(cuò)誤的信息傳遞到后續(xù)錯(cuò)誤處理的操作。

上面提到了 resolve 和 reject 可以改變 Promise 對(duì)象的狀態(tài)，那么它究竟有哪些狀態(tài)呢？

Promise 對(duì)象有三種狀態(tài)：

Fulfilled 可以理解為成功的狀態(tài)

Rejected 可以理解為失敗的狀態(tài)

Pending 既不是 Fulfilld 也不是 Rejected 的狀態(tài)，可以理解為 Promise 對(duì)象實(shí)例創(chuàng)建時(shí)候的初始狀態(tài)

helloWorld 的例子中的 then 方法就是根據(jù) Promise 對(duì)象的狀態(tài)來(lái)確定執(zhí)行的操作，resolve 時(shí)執(zhí)行第一個(gè)函數(shù)（onFulfilled），reject 時(shí)執(zhí)行第二個(gè)函數(shù)（onRejected）。

helloWorld 的例子當(dāng)中利用了 then(onFulfilld, onRejected) 方法來(lái)執(zhí)行一個(gè)任務(wù)打印 "Hello World!"，在多個(gè)任務(wù)的情況下 then 方法同樣可以用一個(gè)清晰的方式完成。

function printHello (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello");
        } else {
            reject("Good bye!");
        }
    });
}

function printWorld () {
    alert("World");
}

function printExclamation () {
    alert("!");
}

printHello(true)
    .then(function(message){
        alert(message);
    })
    .then(printWorld)
    .then(printExclamation);

jsFiddle

上述例子通過(guò)鏈?zhǔn)秸{(diào)用的方式，按順序打印出了相應(yīng)的內(nèi)容。then 可以使用鏈?zhǔn)秸{(diào)用的寫法原因在于，每一次執(zhí)行該方法時(shí)總是會(huì)返回一個(gè) Promise 對(duì)象。另外，在 then onFulfilled 的函數(shù)當(dāng)中的返回值，可以作為后續(xù)操作的參數(shù)，因此上面的例子也可以寫成：

printHello(true).then(function (message) {
    return message;
}).then(function (message) {
    return message  + " World";
}).then(function (message) {
    return message + "!";
}).then(function (message) {
    alert(message);
});

jsFiddle

同樣可以打印出正確的內(nèi)容。

catch 方法是 then(onFulfilled, onRejected) 方法當(dāng)中 onRejected 函數(shù)的一個(gè)簡(jiǎn)單的寫法，也就是說(shuō)可以寫成 then(fn).catch(fn)，相當(dāng)于 then(fn).then(null, fn)。使用 catch 的寫法比一般的寫法更加清晰明確。

Promise.all 可以接收一個(gè)元素為 Promise 對(duì)象的數(shù)組作為參數(shù)，當(dāng)這個(gè)數(shù)組里面所有的 Promise 對(duì)象都變?yōu)?resolve 時(shí)，該方法才會(huì)返回。

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

上面的例子模擬了傳輸兩個(gè)數(shù)據(jù)需要不同的時(shí)長(zhǎng)，雖然 p2 的速度比 p1 要快，但是 Promise.all 方法會(huì)按照數(shù)組里面的順序?qū)⒔Y(jié)果返回。

日常開發(fā)中經(jīng)常會(huì)遇到這樣的需求，在不同的接口請(qǐng)求數(shù)據(jù)然后拼合成自己所需的數(shù)據(jù)，通常這些接口之間沒有關(guān)聯(lián)（例如不需要前一個(gè)接口的數(shù)據(jù)作為后一個(gè)接口的參數(shù)），這個(gè)時(shí)候 Promise.all 方法就可以派上用場(chǎng)了。

還有一個(gè)和 Promise.all 相類似的方法 Promise.race，它同樣接收一個(gè)數(shù)組，不同的是只要該數(shù)組中的 Promise 對(duì)象的狀態(tài)發(fā)生變化（無(wú)論是 resolve 還是 reject）該方法都會(huì)返回。

最后是關(guān)于 Promise 對(duì)象的兼容性問(wèn)題。

在瀏覽器端，一些主流的瀏覽器都已經(jīng)可以使用 Promise 對(duì)象進(jìn)行開發(fā)，在 Node.js 配合 babel 也可以很方便地使用。

如果要兼容舊的瀏覽器，建議可以尋找一些第三方的解決方案，例如 jQuery 的 $.Deferred。

感謝你的閱讀，有不足之處請(qǐng)為我指出。

參考

JavaScript Promise迷你書（中文版）

本文同步于我的個(gè)人博客 http://blog.acwong.org/2015/06/22/es6-promise/