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

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

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

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

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

異步模型

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

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

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

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

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

回調地獄

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

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

// 將數據變成大寫 
function upperAsync(data, callback) { 
    setTimeout(function () { 
        callback(data.toUpperCase()); 
    }, 1000); 
} 
 
// 將數據變為反序 
function reverseAsync(data, callback) { 
    setTimeout(function () { 
        callback(data.split("").reverse().join("")); 
    }, 1000); 
} 
 
// 將數據重復幾遍 
function repeatAsync(data, n, callback) { 
    setTimeout(function () { 
        callback(data.repeat(n)) 
    }, 1000); 
} 

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

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

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

這看起來還算直觀，但如果將幾個異步操作串起來，就另當別論了。如果我們想將數據先變成大寫，再反序，最后重復兩遍，回調函數得層層嵌套：

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}`); 
        }); 
    }); 
}); 

我們先發起 upperAsync 操作，在回調函數中發起 reverseAsync ;而在 reverseAsync 的回調函數，我們還需要發起 repeatAsync 操作;repeatAsync 操作的回調函數將得到最終處理結果。

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

Promise

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

創建 Promise 對象，我們需要先準備一個執行器。執行器是一個函數，它接收兩個參數：

• resolve 函數，執行成功時調用，將執行結果告訴 Promise ;
• reject 函數，執行失敗時調用，將錯誤原因告訴 Promise ;

通過 Promise 對象的 then 方法可以注冊成功時執行的回調函數;通過 catch 方法可以注冊失敗時的回調函數。

以 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}`); 
}); 

• 創建 Promise 對象，執行器執行 upperAsync 操作，結果通過 resolve 告訴 Promise ;
• 調用 Promise 對象 then 方法注冊回調函數，當 upperAsync 操作完成后執行，輸出操作結果;

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

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

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

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

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

鏈式調用

Promise 真正的殺手锏是 鏈式調用 ：

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

then 方法后面可以再次調用 then 方法，為新 Promise 對象注冊回調函數;

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

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}`); 
}); 

• 執行 upperPromise 操作得到一個 Promise 對象;
• 執行 then 方法注冊回調函數，操作成功時打印結果并發起 reversePromise 操作;
• then 回調函數返回 reversePromise 操作的 Promise ，第二個 then 為它注冊回調函數;
• 當 reversePromise 成功完成，執行第二個 then 回調，打印結果并發起 repeatPromise 操作;
• 第三個 then 為 repeatPromise 返回的 Promise 注冊回調函數，打印最終結果;

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

異步函數

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

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

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

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 函數被 async 關鍵字裝飾，因此是一個異步函數。它調用 upperPromise 操作后得到一個 Promise 對象，然后 await 等待 Promise 的兌現操作結果;最后將結果賦值到變量 uppered 。

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

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

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

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

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