作為項(xiàng)目的技術(shù)負(fù)責(zé)人，前端本不是我的主業(yè)。目前，前端團(tuán)隊(duì)無(wú)論從代碼質(zhì)量還是技術(shù)水平，都不太令人滿意。我每周合并代碼時(shí)，有時(shí)會(huì)瞟一眼，有些同學(xué)的代碼真的堪憂。

目前，前端團(tuán)隊(duì)都是初級(jí)工程師，功底較差，做出來(lái)的東西只是能用而已。他們既不會(huì)總結(jié)經(jīng)驗(yàn)，形成最佳實(shí)踐;做事又隨便，總是機(jī)械地應(yīng)付任務(wù)。我苦口婆心地勸他們要多看看書(shū)，思考代碼要怎么寫更好，但收效甚微。

既然規(guī)勸沒(méi)用，我就強(qiáng)制他們學(xué)習(xí)!我定的第一個(gè)課題是 TypeScript ，因?yàn)樗麄兊拇a質(zhì)量很差，希望引入 TypeScript 后提升代碼健壯性。前后端分享頻率都是每周一次，但我有點(diǎn)忙不過(guò)來(lái)，后續(xù)改成雙周一次。

組織過(guò)好幾次 TypeScript 學(xué)習(xí)后，有同學(xué)提議分享自己感興趣的研究課題，我沒(méi)反對(duì)。最近李同學(xué)在研究 Promise ，因此 Promise 便成了本周的分享主題。

我是后端出身，雖然前端項(xiàng)目也是我在主導(dǎo)，但知識(shí)盲區(qū)還有很多。Promise 之前就一直沒(méi)用對(duì)，真是貽笑大方。正好趁著這次機(jī)會(huì)，好好梳理下 Promise 的來(lái)龍去脈，故有此篇。

異步模型

在計(jì)算機(jī)程序中，網(wǎng)絡(luò)和 IO 等操作通常比較耗時(shí)，為此計(jì)算機(jī)先驅(qū)們發(fā)明了兩種不同的編程模型：

• 同步 模型，操作發(fā)起后程序進(jìn)入阻塞狀態(tài)，等待操作完成;
• 異步 模型，操作發(fā)起后程序先干別的事，操作完成后再通知程序處理;

Javascript 是單線程程序，為避免網(wǎng)絡(luò)和用戶操作阻塞程序，只能采用異步編程模型。異步操作發(fā)起后，Javascript 不會(huì)等待操作完成，而是接著干別的事情。

異步編程模型通常需要 回調(diào)函數(shù)( callback function )來(lái)配合，操作發(fā)起前先注冊(cè)一個(gè)回調(diào)函數(shù)，操作完畢后自動(dòng)執(zhí)行回調(diào)函數(shù)。以在瀏覽器中發(fā)起原生 http 請(qǐng)求為例：

// 操作完成后要執(zhí)行的回調(diào)函數(shù) 
function onLoad(event) { 
    // 輸出響應(yīng)內(nèi)容 
    console.log(event.target.response) 
} 
 
// 創(chuàng)建請(qǐng)求對(duì)象 
const request = new XMLHttpRequest(); 
// 將回調(diào)函數(shù)注冊(cè)為事件處理器 
// 操作完畢后將自動(dòng)執(zhí)行 
request.addEventListener("load", onLoad); 
// 發(fā)起操作 
request.open("GET", "https://cors.fasionchan.com/about.txt"); 
request.send(); 

回調(diào)地獄

基于回調(diào)函數(shù)的編程模型并不直觀：因?yàn)榛卣{(diào)函數(shù)會(huì)層層嵌套，異步操作一多便深陷十八層地獄。

為了說(shuō)明回調(diào)地獄的由來(lái)，我們憑空生造幾個(gè)異步操作：

// 將數(shù)據(jù)變成大寫 
function upperAsync(data, callback) { 
    setTimeout(function () { 
        callback(data.toUpperCase()); 
    }, 1000); 
} 
 
// 將數(shù)據(jù)變?yōu)榉葱?nbsp;
function reverseAsync(data, callback) { 
    setTimeout(function () { 
        callback(data.split("").reverse().join("")); 
    }, 1000); 
} 
 
// 將數(shù)據(jù)重復(fù)幾遍 
function repeatAsync(data, n, callback) { 
    setTimeout(function () { 
        callback(data.repeat(n)) 
    }, 1000); 
} 

這些原本都是簡(jiǎn)單的數(shù)據(jù)操作，但我們暫且將它們當(dāng)成異步操作，需要一秒鐘才能完成。執(zhí)行這些異步操作時(shí)，除了將數(shù)據(jù)作為參數(shù)傳進(jìn)去，還提供一個(gè)回調(diào)函數(shù)：

const data = "abc"; 
 
upperAsync(data, function (uppered) { 
    console.log(`after upper: ${uppered}`); 
}); 

數(shù)據(jù)處理完畢后，upperAsync 函數(shù)將調(diào)用回調(diào)函數(shù)，并將處理結(jié)果傳回來(lái)。因此，一秒鐘之后，我們將看到屏幕中輸出：after upper: ABC。

這看起來(lái)還算直觀，但如果將幾個(gè)異步操作串起來(lái)，就另當(dāng)別論了。如果我們想將數(shù)據(jù)先變成大寫，再反序，最后重復(fù)兩遍，回調(diào)函數(shù)得層層嵌套：

const data = "abc"; 
 
upperAsync(data, function (uppered) { 
    console.log(`after upper: ${uppered}`); 
 
    reverseAsync(uppered, function (reversed) { 
        console.log(`after reverse: ${reversed}`); 
 
        repeatAsync(reversed, 2, function (repeated) { 
            console.log(`after repeat: ${repeated}`); 
        }); 
    }); 
}); 

我們先發(fā)起 upperAsync 操作，在回調(diào)函數(shù)中發(fā)起 reverseAsync ;而在 reverseAsync 的回調(diào)函數(shù)，我們還需要發(fā)起 repeatAsync 操作;repeatAsync 操作的回調(diào)函數(shù)將得到最終處理結(jié)果。

回調(diào)函數(shù)層層嵌套，代碼縮進(jìn)也越來(lái)越深。請(qǐng)看 console.log 語(yǔ)句，一個(gè)比一個(gè)深。這個(gè)例子才串聯(lián)了三個(gè)異步操作，看著就這么費(fèi)勁。如果異步操作很多，又該怎么辦呢?

Promise

為了解決層層嵌套的回調(diào)地獄，前端先驅(qū)們發(fā)明了 Promise 。Promise 是一種特殊的對(duì)象，代表異步操作的執(zhí)行結(jié)果(未來(lái))：既可能是成功，也可能是失敗。

創(chuàng)建 Promise 對(duì)象，我們需要先準(zhǔn)備一個(gè)執(zhí)行器。執(zhí)行器是一個(gè)函數(shù)，它接收兩個(gè)參數(shù)：

• resolve 函數(shù)，執(zhí)行成功時(shí)調(diào)用，將執(zhí)行結(jié)果告訴 Promise ;
• reject 函數(shù)，執(zhí)行失敗時(shí)調(diào)用，將錯(cuò)誤原因告訴 Promise ;

通過(guò) Promise 對(duì)象的 then 方法可以注冊(cè)成功時(shí)執(zhí)行的回調(diào)函數(shù);通過(guò) catch 方法可以注冊(cè)失敗時(shí)的回調(diào)函數(shù)。

以 upperAsync 操作為例：

const data = "abc"; 
 
const promise = new Promise(function (resolve) { 
    upperAsync(data, function (uppered) { 
        resolve(uppered); 
    }) 
}); 
 
promise.then(function (uppered) { 
    console.log(`after upper: ${uppered}`); 
}); 

• 創(chuàng)建 Promise 對(duì)象，執(zhí)行器執(zhí)行 upperAsync 操作，結(jié)果通過(guò) resolve 告訴 Promise ;
• 調(diào)用 Promise 對(duì)象 then 方法注冊(cè)回調(diào)函數(shù)，當(dāng) upperAsync 操作完成后執(zhí)行，輸出操作結(jié)果;

這個(gè)例子乍一看似乎將問(wèn)題復(fù)雜化了，代碼也繁瑣了許多。如果將異步操作預(yù)先封裝成 Promise 版本，情況就好很多。以 upperAsync 操作為例，將其封裝成 Promise 版本 upperPromise ：

function upperPromise(data) { 
    return new Promise(function (resolve) { 
        upperAsync(data, function (uppered) { 
            resolve(uppered); 
        }); 
    }); 
} 

這樣我們只需調(diào)用 upperPromise ，得到一個(gè) Promise 對(duì)象，代表未來(lái)的執(zhí)行結(jié)果。然后我們執(zhí)行 Promise 對(duì)象的 then 方法，注冊(cè)操作成功時(shí)的回調(diào)函數(shù)，對(duì)結(jié)果進(jìn)行輸出：

const data = "abc"; 
 
upperPromise(data).then(function (uppered) { 
    console.log(`after upper: ${uppered}`); 
}); 

代碼看著清爽了很多，但感覺(jué)也只是換了種寫法而已?

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

Promise 真正的殺手锏是 鏈?zhǔn)秸{(diào)用 ：

• then 方法里面可以發(fā)起另一個(gè)異步操作，返回 Promise 對(duì)象;

then 方法后面可以再次調(diào)用 then 方法，為新 Promise 對(duì)象注冊(cè)回調(diào)函數(shù);

這樣一來(lái)，通過(guò) Promise 鏈?zhǔn)秸{(diào)用，我們可以將多個(gè)異步操作串聯(lián)起來(lái)，再也不用層層嵌套：

const data = "abc"; 
 
upperPromise(data).then(function (uppered) { 
    console.log(`after upper: ${uppered}`); 
    return reversePromise(uppered); 
}).then(function (reversed) { 
    console.log(`after reverse: ${reversed}`); 
    return repeatPromise(reversed, 2); 
}).then(function (repeated) { 
    console.log(`after repeat: ${repeated}`); 
}); 

• 執(zhí)行 upperPromise 操作得到一個(gè) Promise 對(duì)象;
• 執(zhí)行 then 方法注冊(cè)回調(diào)函數(shù)，操作成功時(shí)打印結(jié)果并發(fā)起 reversePromise 操作;
• then 回調(diào)函數(shù)返回 reversePromise 操作的 Promise ，第二個(gè) then 為它注冊(cè)回調(diào)函數(shù);
• 當(dāng) reversePromise 成功完成，執(zhí)行第二個(gè) then 回調(diào)，打印結(jié)果并發(fā)起 repeatPromise 操作;
• 第三個(gè) then 為 repeatPromise 返回的 Promise 注冊(cè)回調(diào)函數(shù)，打印最終結(jié)果;

有了鏈?zhǔn)秸{(diào)用，可以很清晰地串聯(lián)多個(gè)異步操作，而不用一層又層地嵌套回調(diào)函數(shù)。注意到，每個(gè) console.log 語(yǔ)句的縮進(jìn)都是一樣的，它們都屬于同一層。這種寫法更符合人的直觀感受——程序從上往下依次執(zhí)行。

異步函數(shù)

后來(lái) ES 又引入了異步函數(shù)，徹底解決了這個(gè)問(wèn)題。

異步函數(shù)是指被 async 修飾的函數(shù)，在其內(nèi)部可以通過(guò) await 關(guān)鍵字來(lái)等待 Promise 對(duì)象的最終結(jié)果。當(dāng) Promise 對(duì)象兌現(xiàn)后，await 語(yǔ)句便可結(jié)束等待，并取得結(jié)果。

我們將上面的例子改為異步函數(shù)版本，看著舒服多了：

async function process(data) { 
    const uppered = await upperPromise(data); 
    console.log(`after upper: ${uppered}`); 
 
    const reversed = await reversePromise(uppered); 
    console.log(`after reverse: ${reversed}`); 
 
    const repeated = await repeatPromise(reversed, 2); 
    console.log(`after repeat: ${repeated}`); 
} 
 
const data = "abc"; 
process(data); 

process 函數(shù)被 async 關(guān)鍵字裝飾，因此是一個(gè)異步函數(shù)。它調(diào)用 upperPromise 操作后得到一個(gè) Promise 對(duì)象，然后 await 等待 Promise 的兌現(xiàn)操作結(jié)果;最后將結(jié)果賦值到變量 uppered 。

接著，它以同樣的方式依次執(zhí)行 reversePromise 和 repeatPromise 操作，徹底將回調(diào)函數(shù)拋之腦后。除了增加的 async 和 await 關(guān)鍵字外，編程模型跟其他語(yǔ)言沒(méi)有任何區(qū)別了。

await 除了能夠等待 Promise 對(duì)象外，還能等待另一個(gè)異步函數(shù)返回結(jié)果。實(shí)際上，異步函數(shù)是針對(duì) Promise 對(duì)象的再次封裝，從語(yǔ)法層面對(duì) Promise 編程模型的進(jìn)一步優(yōu)化。我們執(zhí)行一個(gè)異步函數(shù)，得到一個(gè) Promise 對(duì)象，這也是異步函數(shù)可以被 await 的原因。

本文算是我作為后端研發(fā)對(duì) Javascript 異步編程模型和演化歷程的初步理解，從最開(kāi)始的 回調(diào)函數(shù) 以及它帶來(lái)的回調(diào)地獄，到 Promise 以及它的鏈?zhǔn)秸{(diào)用，再到終極解決方案—— 異步函數(shù) 。發(fā)展脈絡(luò)如此清晰，引人入勝。

學(xué)習(xí)一個(gè)新東西，我通常不會(huì)一開(kāi)始就去啃那些抽象的定義，記憶那些繁瑣的概念和用法。相反，我會(huì)從技術(shù)背景入手，看它用怎樣的方式，解決了什么問(wèn)題。明確技術(shù)設(shè)計(jì)思路和演進(jìn)路徑后，一切都變得自然而然。

現(xiàn)在算是掌握了 Promise 和異步函數(shù)的一些皮毛，后續(xù)有機(jī)會(huì)再寫寫李同學(xué)分享的 Promise 高級(jí)用法和實(shí)現(xiàn)原理，敬請(qǐng)期待!