摘要：回調(diào)地獄的問題在于寫法過于繁瑣不夠優(yōu)雅代碼維護(hù)炒雞蛋疼，所以一直被前端程序猿所詬病，尤其是維護(hù)類似代碼的時(shí)候簡(jiǎn)直日了一群哈士奇。，對(duì)象狀態(tài)以和為分水嶺。方法返回一個(gè)帶有拒絕原因參數(shù)的對(duì)象摘自對(duì)的解釋。并且返回的也是一個(gè)對(duì)象。

“異步虐我千百遍，我待異步如初戀”?。?br>做前端的同學(xué)做異步肯定都不陌生。因?yàn)镴avaScript是單線程語(yǔ)言(也就是說不支持多線程編程，這不是廢話么啊喂！)，所以在JavaScript中處理異步問題也是經(jīng)過了幾代人的踩坑和開荒才有了今天的“花里胡哨”的解決方案。

利用回調(diào)來實(shí)現(xiàn)異步是一直以來非常有效的解決方案，而且經(jīng)久不衰。其背后的原理很簡(jiǎn)單，就是利用JavaScript中可以將函數(shù)作為參數(shù)傳入另一個(gè)函數(shù)(萬(wàn)物皆對(duì)象)。舉個(gè)栗子：

function callBack() {
    console.log("回調(diào)啦回調(diào)啦?。。?);
}

function main(cb) {
    console.log("我會(huì)運(yùn)行很久！")
    cb();
}

main(callBack);

下面一段代碼中實(shí)現(xiàn)兩個(gè)函數(shù) callBack 和 main。隨后將 callBack 傳入到 main 函數(shù)中，當(dāng) main 函數(shù)執(zhí)行到一個(gè)階段時(shí)候會(huì)調(diào)用傳入的回調(diào)函數(shù) ( 此處是當(dāng)main函數(shù)運(yùn)行到底部時(shí)候就調(diào)用了回調(diào)函數(shù) )。運(yùn)行結(jié)果不言而喻：

這樣的寫法看起來貌似還行，寫法簡(jiǎn)單明了，一看就懂。但是這里筆者要吐槽下去年自己的智商，且聽慢慢道來：
去年在重構(gòu)項(xiàng)目的時(shí)候，有一個(gè)頁(yè)面需要展示 4 個(gè)下拉框而且下拉框的數(shù)據(jù)需要從后臺(tái)拉取。所以筆者在ComponentWillMount(React項(xiàng)目)方法中執(zhí)行了拉取數(shù)據(jù)的動(dòng)作而且是分開獨(dú)立拉取，類似于：

......

ComponentWillMount() {
    let data = {};
    fetchSelect1();
    fetchSelect2();
    fetchSelect3();
    fetchSelect4();
}

......

最后在四個(gè)方法中將數(shù)據(jù)存儲(chǔ)到 data 對(duì)象中以供渲染選擇框，但是后面出現(xiàn)了一個(gè)意想不到問題：總會(huì)有一個(gè)下拉框數(shù)據(jù)拉取失敗。所以不得已采用了回調(diào)方式來處理，這里再狠狠得吐槽一下自己，如果那時(shí)候會(huì)用Promise，也不會(huì)那么尷尬。下面貼一下當(dāng)時(shí)的代碼：

/* fetch data source prop selects */
router.get("/fetch-selects", function(req, resp, next) {
    let path1 = config.BACKEND_API.BASE_URL + "/datasource/frequency";
    var reponseData = {};
    httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path1, "GET", function(data) {
        reponseData.frequency = data;
        let path2 = config.BACKEND_API.BASE_URL + "/datasource/category";
        httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path2, "GET", function(data) {
            reponseData.category = data;
            let path3 = config.BACKEND_API.BASE_URL + "/datasource/type";
            httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path3, "GET", function(data) {
                reponseData.type = data;
                let path4 = config.BACKEND_API.BASE_URL + "/datasource/process/type";
                httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path4, "GET", function(data) {
                    reponseData.process = data;
                    resp.json(reponseData);
                }, function(code, body) {

                })
            }, function(code, body) {

            })
        }, function(code, body) {

        })
    }, function(code, body) {

    })
});

當(dāng)時(shí)用的Node項(xiàng)目做的中間層，這是一個(gè)路由?？梢钥闯鰜砥鋵?shí)就是在拉取完第一條數(shù)據(jù)后再調(diào)用另一個(gè)函數(shù)來拉取第二條數(shù)據(jù)，如此嵌套下去。好在只需要拉取 4 條數(shù)據(jù)，那如果有10條乃至100條數(shù)據(jù)需要拉取怎么辦？那豈不是需要嵌套出一個(gè)很深很深的代碼結(jié)構(gòu)么？這就是臭名昭著的“回調(diào)地獄”?！盎卣{(diào)地獄”的問題在于寫法過于繁瑣不夠優(yōu)雅、代碼維護(hù)炒雞蛋疼，所以一直被前端程序猿所詬病，尤其是維護(hù)類似代碼的時(shí)候簡(jiǎn)直日了一群哈士奇。不僅僅是想死的心了，完全想刪庫(kù)走人啊喂！

當(dāng)前端異步工作處于水深火熱中時(shí)，一個(gè)英雄踏著七彩祥云而來，他，就是 Promise。讓我們相信：一個(gè)承諾，終究會(huì)被兌現(xiàn)。

Promise 先由社區(qū)提出來的概念，主要是用于解決前端的異步問題，慶幸的是它在ES6中也得到了實(shí)現(xiàn)。

Promise 是一個(gè)狀態(tài)機(jī)。這么說可能有點(diǎn)不好懂，上個(gè)代碼先：

new Promise(function(resolve, reject) {
    try {
        resolve("Success")
    } catch (e) {
        reject(e);
    }
})

從上面可以看出幾個(gè)重要的點(diǎn)：
1，Promise是一個(gè)構(gòu)造函數(shù)。
2，新建Promise對(duì)象需要傳入執(zhí)行器函數(shù) (executor function)。
3，執(zhí)行器函數(shù)中有兩個(gè)參數(shù) resolve 和 reject。這兩個(gè)也是執(zhí)行器函數(shù)。

對(duì)此來解釋下什么叫狀態(tài)機(jī)
Promise對(duì)象有三個(gè)狀態(tài)：pending, fulfilled, rejected，沒圖說個(gè)JB？

從圖中可以看出，Promise對(duì)象的初始狀態(tài)是pending ，如果經(jīng)過了 resolve 方法，狀態(tài)置為 fulfilled ；如果經(jīng)過了 reject 方法，狀態(tài)置為 rejected 。而且有三點(diǎn)需要明確：
1，Promise對(duì)象的狀態(tài)轉(zhuǎn)換只有 pending--->fulfilled 或者 pending--->rejected。沒有其它形式的轉(zhuǎn)換。
2，Promise 對(duì)象的狀態(tài)一經(jīng)轉(zhuǎn)換則永久凍結(jié)，意思就是說比如狀態(tài)被置為 fulfilled 后，無(wú)法再回到 pending。
3，Promise對(duì)象狀態(tài)以resolve 和 reject為分水嶺。調(diào)用這個(gè)兩個(gè)方法之前，都處于pending狀態(tài)。

Promise.resolve(value)方法返回一個(gè)以給定值 value 解析后的 Promise 對(duì)象

摘自MDN對(duì) Promise.resolve() 的解釋。簡(jiǎn)單的理解就是它用來返回任務(wù)執(zhí)行成功后的返回值。Promise對(duì)象調(diào)用完這個(gè)方法后狀態(tài)就被置為 fulfilled。

Promise.reject(reason)方法返回一個(gè)帶有拒絕原因reason參數(shù)的 Promise 對(duì)象

摘自MDN對(duì) Promise.reject() 的解釋。Promise對(duì)象調(diào)用完這個(gè)方法后狀態(tài)就被置為 rejected。

看到這里可能會(huì)有這么一個(gè)問題：既然Promise用 resolve 和reject 返回處理結(jié)果，那如何獲取到這個(gè)結(jié)果呢？那么then()就大有可為了。從小標(biāo)題可以看出 then 方法被放在Promise的原型上，也就是說任何一個(gè)Promise對(duì)象都可以調(diào)用這個(gè)方法，不管何時(shí)何地。then()方法的參數(shù)為兩個(gè)個(gè)執(zhí)行器函數(shù)，第一個(gè)函數(shù)用來處理 resolve() 返回值，第二個(gè)函數(shù)用來處理 reject() 返回值。并且then()返回的也是一個(gè) Promise 對(duì)象。舉個(gè)