(????)??嗨，我是你穩(wěn)定更新、干貨賊多的勾勾。

前兩篇討論了異步模式和回調(diào)函數(shù)，結(jié)尾談到了令人頭皮發(fā)麻的回調(diào)地獄。

要想拯救出回調(diào)地獄的代碼，只有請我們的 Promise 出山了。

拯救頭發(fā)小斗士，出發(fā)！

Promise

Promise 譯為承諾、許諾、希望，意思就是異步任務(wù)交給我來做，一定（承諾、許諾）給你個結(jié)果。

在執(zhí)行的過程中，Promise 的狀態(tài)會修改為 pending。一旦有了結(jié)果，就會再次更改狀態(tài)。

異步執(zhí)行成功的狀態(tài)是 Fulfilled , 這就是承諾給你的結(jié)果。狀態(tài)修改后，會調(diào)用成功的回調(diào)函數(shù) onFulfilled 來將異步結(jié)果返回。

異步執(zhí)行成功的狀態(tài)是 Rejected，這就是承諾給你的結(jié)果。然后調(diào)用 onRejected 說明失敗的原因（異常接管）。

如果將前面對 ajax 函數(shù)的封裝，改為 Promise ?的方式，結(jié)果又會是什么？

Promise 重構(gòu) Ajax 的異步請求封裝

function myAjax(url) {    return new Promise(function (resolve, reject) {        var xhr = new XMLHttpRequest();        xhr.onreadystatechange = function () {            if (this.readyState == 4) {                if (this.status == 200) {                    // 成功的回調(diào)                    resolve(this.responseText)                } else {                    // 失敗的回調(diào)                    reject(new Error());                }            }        }
        xhr.open('get', url)        xhr.send();    })}

還是前面提到的邏輯，如果返回的結(jié)果中，又有 ajax 請求需要發(fā)送，可一定記得使用鏈?zhǔn)秸{(diào)用，不要在 then 中直接發(fā)起下一次請求，否則，又是地獄相見了。

//  ==== Promise 誤區(qū)====myAjax('./d1.json').then(data=>{    console.log(data);    myAjax('./d2.json').then(data=>{        console.log(data)        // ……回調(diào)地獄……    })})

鏈?zhǔn)降囊馑季褪窃谏弦淮?then 中，返回下一次調(diào)用的 Promise 對象，我們的代碼就不會進(jìn)地獄了。

myAjax('./d1.json')    .then(data=>{    console.log(data);    return myAjax('./d2.json')})    .then(data=>{    console.log(data)    return myAjax('./d3.json')})    .then(data=>{    console.log(data);})    .catch(err=>{    console.log(err);})

終于逃脫了回調(diào)地獄！

雖然我們脫離了回調(diào)地獄，但是 .then 的鏈?zhǔn)秸{(diào)用依然不太友好。

頻繁的 .then 并不符合自然的運行邏輯，Promise 的寫法只是回調(diào)函數(shù)的改進(jìn)，使用then 方法以后，異步任務(wù)的兩段執(zhí)行看得更清楚了，除此以外，并無新意。

Promise 的最大問題是代碼冗余。原來的任務(wù)被 Promise 包裝了一下，不管什么操作，一眼看去都是一堆 then，原來的語義變得很不清楚。

于是，在 Promise 的基礎(chǔ)上，Async 函數(shù)出現(xiàn)了。

終極異步解決方案，千呼萬喚地在 ES2017 中發(fā)布了。

下一篇，展開說說(? ?_?)?。

推薦閱讀：

異步無處不在：同步模式和異步模式（一）

異步無處不在：回調(diào)函數(shù)（二）

Redux 續(xù)集 | 如何搞定其中的異步操作？

技術(shù)人年度總結(jié) | 2020，注定不平凡

2020 最后一篇技術(shù)文：可愛的烏咪 UmiJS

是我 Web 端配不上阿里了。

不可避免的問題：React 的路由如何抽離？

前端人因為 Vue3 的 Ref-sugar 提案打起來了！

點點“贊”和“在看”，保護(hù)頭發(fā)，減少bug。