作為項目的技術負責人，前端本不是我的主業(yè)。目前，前端團隊無論從代碼質量還是技術水平，都不太令人滿意。我每周合并代碼時，有時會瞟一眼，有些同學的代碼真的堪憂。

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

既然規(guī)勸沒用，我就強制他們學習!我定的第一個課題是 TypeScript ，因為他們的代碼質量很差，希望引入 TypeScript 后提升代碼健壯性。前后端分享頻率都是每周一次，但我有點忙不過來，后續(xù)改成雙周一次。

組織過好幾次 TypeScript 學習后，有同學提議分享自己感興趣的研究課題，我沒反對。最近李同學在研究 Promise ，因此 Promise 便成了本周的分享主題。

我是后端出身，雖然前端項目也是我在主導，但知識盲區(qū)還有很多。Promise 之前就一直沒用對，真是貽笑大方。正好趁著這次機會，好好梳理下 Promise 的來龍去脈，故有此篇。

異步模型

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

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

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

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

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

回調(diào)地獄

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

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

// 將數(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ù)重復幾遍 
function repeatAsync(data, n, callback) { 
    setTimeout(function () { 
        callback(data.repeat(n)) 
    }, 1000); 
} 

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

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

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

這看起來還算直觀，但如果將幾個異步操作串起來，就另當別論了。如果我們想將數(shù)據(jù)先變成大寫，再反序，最后重復兩遍，回調(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ù)將得到最終處理結果。

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

Promise

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

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

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

通過 Promise 對象的 then 方法可以注冊成功時執(zhí)行的回調(diào)函數(shù);通過 catch 方法可以注冊失敗時的回調(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 對象，執(zhí)行器執(zhí)行 upperAsync 操作，結果通過 resolve 告訴 Promise ;
• 調(diào)用 Promise 對象 then 方法注冊回調(diào)函數(shù)，當 upperAsync 操作完成后執(zhí)行，輸出操作結果;

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

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

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

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

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

鏈式調(diào)用

Promise 真正的殺手锏是 鏈式調(diào)用 ：

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

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

這樣一來，通過 Promise 鏈式調(diào)用，我們可以將多個異步操作串聯(lián)起來，再也不用層層嵌套：

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 操作得到一個 Promise 對象;
• 執(zhí)行 then 方法注冊回調(diào)函數(shù)，操作成功時打印結果并發(fā)起 reversePromise 操作;
• then 回調(diào)函數(shù)返回 reversePromise 操作的 Promise ，第二個 then 為它注冊回調(diào)函數(shù);
• 當 reversePromise 成功完成，執(zhí)行第二個 then 回調(diào)，打印結果并發(fā)起 repeatPromise 操作;
• 第三個 then 為 repeatPromise 返回的 Promise 注冊回調(diào)函數(shù)，打印最終結果;

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

異步函數(shù)

后來 ES 又引入了異步函數(shù)，徹底解決了這個問題。

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

我們將上面的例子改為異步函數(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 關鍵字裝飾，因此是一個異步函數(shù)。它調(diào)用 upperPromise 操作后得到一個 Promise 對象，然后 await 等待 Promise 的兌現(xiàn)操作結果;最后將結果賦值到變量 uppered 。

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

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

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

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

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