面試官問：來實現一個Promise

大家好，我是若川。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經有超50+人提交了筆記，群里已經有超1500人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12?參與，一起學習，共同進步。
前言

Promise 作為異步編程的一種解決方案，在 ES6 中被標準化，提供了 Promise 對象和一系列的 API。在事件循環、鏈式調用、調度器實現等面試場景中均有涉及。在本文中筆者將從零實現一個符合 Promise/A+ 標準的 Promise 主體代碼邏輯，并在后續系列文章中給出其他方法的實現以及常見的實際使用場景中的解法。

1、準備

本文按?Promise/A+^[1]?(中文版【翻譯】Promises/A+規范^[2]) 的標準實現，不熟悉的讀者可以先看一遍，了解一些術語做些準備知識。

2、Promise 實現

本節，我們將進入正題，從零實現一個我們自己的 Promise。PS：在下文中，本文約定大寫 Promise 指代我們實現的 MyPromise 函數對象，小寫 promise 指代一個實例對象。

現在，我們實現的 MyPromise 函數第一版定義如下

function MyPromise(executor) {// TODO}

2.1、狀態定義

Promise 只有三種狀態：pending、fulfilled 和 rejected，其中后兩種是終態。

因此，我們可以先定義一個狀態集合：

const PRO_STATUS = {PENDING: 'pending',FULFILLED: 'fulfilled',REJECTED: 'rejected'
}

2.2、狀態轉換及方式

promise 對象內部就像一個狀態機，但是這個狀態機有一點自己的限制條件，即，它的狀態變換路徑只有兩種：

pending-》fulfilled 
或者
pending -》rejected

并且，轉換之后是固定的。Ok，在談完狀態轉換的路徑后，我們來看一下狀態轉換的方式。

在初始化 promise 對象時需要向構造函數提供一個 executor 函數，該函數有兩個入參（函數類型）：

?1、resolve，該函數接受一個參數，更改 promise 內部狀態 pending-》fullfilled?2、reject，該函數接受一個 Error 類型參數，更改 promise 內部狀態 pending -》rejected

至此，總結一下我們的 MyPromise 里應該有幾個東西：

當前狀態
fulfilled 狀態下的 value 值
rejected 狀態下的 reason 值
resolve 函數
reject 函數

那么，MyPromise 第二版現在是如下的樣子：

let count = 0
function MyPromise(executor) {const self = thisself.status = PRO_STATUS.PENDINGself.count = ++countself.fulfilledValue = undefinedself.rejectedReason = undefinedtry {executor(resolve, reject)} catch (error) {reject(error)}function resolve(rs) {//TODO}function reject(err){// TODO}
}

這里，我們為每個實例追加了一個 count 計數，讀者可以忽略。

實例化函數后，我們直接執行了 executor 函數，并傳入了兩個函數類型的參數。在 executor 函數內部，用戶可以通過 resolve 或者 reject 修改 promise 對象進入終態，并且只能進入一次，舉個例子：

new MyPromise((resolve, reject)=>{//balabala.......resolve(1) reject(new Error('error'))resolve(2)
})

這里寫了三行修改 promise 狀態的代碼，但是最后 promise 的狀態是 fulfilled，并且 fulfilledValue 是 1。這個我們在后面 resolve 和 reject 實現中說。

2.3、then 和 catch 方法

我們知道，Promise 對象實現了鏈式調用來解決回調地獄的問題。類似這樣：

new Promise(()=>{....
})
.then(rs=>{...
})
.then(rs=>{})
.catch(err=>{})

也就是說，我們可以在 then 或 catch 中拿到 promise 對象的終態數據并通過生成新的 promise 對象向下傳遞。

首先，我們來看看 then 方法。

then 方法接受兩個函數類型的參數：onfulfilled 和 onrejected。onfulfilled 接受 promise 的 fulfilledValue 作為入參并在 promise 為 fulfilled 狀態時被調用， onrejected 接受 promise 的 rejectedReason 作為入參并在 promise 為 rejected 狀態時被調用。

const onfulfilled = value =>{...}
const onrejected = reason =>{...}
promiseA.then(onfulfilled, onrejected)

此外，then 方法將返回一個新的 Promise 類型對象。

相比 then方法，catch?方法僅接受一個 onrejected 函數類型的參數。和 then 方法一樣將返回一個新的 Promise 類型對象。

const onrejected = reason =>{...}
promiseA.catch(onrejected)

實際上，then 和 catch 方法有幾個作用：

?為 promise 對象收集 onfulfilled 和 onrejected 回調函數，在終態后（resolve 和 reject 函數觸發）進行回調的調用?觸發 onfulfilled 和 onrejected 回調函數

其實第一個比較好理解，第二個可以用下面一個代碼去解釋。

let promise = new Promise((resolve)=>{setTimeout(()=>{resolve()promise.then(rs=>{console.log(2)}) // then2})
}).then(rs=>{console.log(1)}) // then1

rs=>{console.log(1)} 回調通過 then1 收集，在 resolve 調用后被觸發。此時 promise 對象進入終態， rs=>{console.log(2)} 回調通過 then2 收集并觸發執行。

并且，這些回調函數只會被調用一次。

綜上，我們可以總結如下：

?MyPromise 內部 resolve、reject 函數以及 then、catch 都可能會觸發回調函數執行，那么他們可能在代碼鏈路上交匯在某個執行點，也就是說他們調用了同一個處理函數，我們定義為 _handle 函數。?此外，Promise 函數內部有一個數據結構維護當前的回調函數，這里我們需要一個隊列。?最后，如果我們有 promise A 對象，promise A 對象的 then 和 catch 方法都會返回一個新的 promise B 實例，A 內部狀態是 fullfilled，它只調用 onfulfilled 方法。此外，promise A 進入終態才會使得 promise B 進入終態，關鍵點在于 A 持有 B 的 resolve、reject，A 進入終態后調用 B 的 resolve/reject，具體調用 resolve 還是 reject 以及入參要分情況區別。

Ok，有了上面的結論，我們繼續修改已有代碼：

const TYPES = {THEN: 'then',CATCH: 'catch',FINALLY: 'finally'
}
...
function MyPromise(executor) {const self = this...self.cbQueue = [] // 保存回調等數據...function resolve(rs) {self._handle()}function reject(err){self._handle()}
}MyPromise.prototype._handle = function(cb){// TODO
}/*** * @param {*} onfulfilled * @param {*} onrejected * @returns */
MyPromise.prototype.then = function(onfulfilled, onrejected) {return new Promise((resolve, reject) => {this._handle({type: TYPES.THEN,resolve,reject,onfulfilled,onrejected})})
}/*** * @param {*} onrejected * @returns */
MyPromise.prototype.catch = function(onrejected) {return new Promise((resolve, reject) => {this._handle({type: TYPES.CATCH,resolve,reject,onrejected})})
}

上面的代碼里，我們還定義了一個 TYPES 來指定回調函數是通過 then、catch還是 finally 方法收集的，以此來輔助我們在 _handle 函數中的處理。

現在關鍵來到了 _handle 函數。我們根據 Promise/A+ 的標準和實際代碼使用中，對于細節進行了歸結。

?1、A.resolve() 情況下，B 不管是通過 then 還是 catch 產生，都要調用 B.resolve()，入參要看是否提供了 onfulfilled，具體如下：

????1）如果 B 是 A.then 生成，則 B.resolve(onfulfilled(A.fulfilledValue))

????2）如果 B 是 A.catch 生成，則 B.resolve(A.fulfilledValue)，不會調用 A.catch 提供的 onrejected 方法如果不提供 onfulfilled 則 B.resolve(A.fulfilledValue)

?2、注意，A.reject() 的情況下，如果有 onrejected 函數處理則狀態發生轉換，并且入參要看是否提供了 onrejected 函數進行包裝，具體如下：

????1）A 調用 reject，B 是 A.then 生成，則 B.reject(A.rejectedReason) 或者 B.resolve(onrejected(A.rejectedReason))

????2）A 調用 reject，B 是 A.catch 生成，則 B.resolve(onrejected(A.rejectedReason)) 如果不提供 onrejected 則 B.reject(A.rejectedReason)

?????????3、如果 A.fulfilledValue 是一個 Promise 類型，則要把 A.then() 這些收集到的回調給 A.fulfilledValue

針對 3，可以看如下示例代碼：

function delay(){new Promise((resolve, reject)=>{// promise 0// console.log('0')// resolve('resolve')reject(new Error('reject'))}).then(rs=>{return new Promise(resolve=>{setTimeout(()=>{console.log('1')resolve('inner rs')}, 2000)})}).catch(err=>{ // promise 1return new Promise(resolve=>{ // promise 2setTimeout(()=>{console.log('1')resolve('inner err')}, 2000)})}).then(rs=>{console.log('2')return 'then2'})
}
最后打印：
（注：先延遲2s）
1 
2

最后的 then 會被 promise1 收集到，因為 promise1 的 fulfilledValue 是一個 Promise 類型對象，即 promise2。要實現延遲 2s 打印 1 后再打印 2，需要把 promise1 收集到的回調賦給 promise2。

Ok，了解了處理邏輯，我們就可以直接上代碼了。

MyPromise.prototype._handle = function(cb){if(cb) {// then、catch、finally 方法處理this.cbQueue.push(cb)}else{// resolve、reject 處理}if(this.status === PRO_STATUS.PENDING){// nothing to do} else {for (let i = 0; i < this.cbQueue.length; i++) {const cb = this.cbQueue[i];const { type, resolve, reject, onfulfilled, onrejected, onfinally } = cb// finallyif(type === TYPES.FINALLY){onfinally()resolve()continue}if(this.status === PRO_STATUS.FULFILLED){//if(typeof resolve === 'function'){let fulfilledValue = this.fulfilledValuelet ans = fulfilledValueif(fulfilledValue instanceof MyPromise){// 收集的回調賦給 fulfilledValuefulfilledValue.cbQueue = this.cbQueuethis.cbQueue = []continue}if(typeof onfulfilled === 'function'){// 這里要處理一下數據ans = onfulfilled(fulfilledValue)if(ans instanceof MyPromise && ans.status !== PRO_STATUS.PENDING){if(ans.status === PRO_STATUS.FULFILLED){resolve(ans.fulfilledValue)}else{reject(ans.rejectedReason)}}else{resolve(ans)}}else{resolve(ans)}}}else{if(typeof resolve === 'function'){let ans = this.fulfilledValueif(typeof onrejected === 'function'){/*** 這個地方要注意下，上面 setTimeout模擬異步的地方，修改狀態的部分要放在 setTimeout 外面。* 否則到這里， status 還是 pending*/ans = onrejected(this.rejectedReason)if(ans instanceof MyPromise && ans.status !== PRO_STATUS.PENDING){if(ans.status === PRO_STATUS.FULFILLED){resolve(ans.fulfilledValue)}else{reject(ans.rejectedReason)}}else{resolve(ans)}}else{reject(this.rejectedReason)}}}// })}this.cbQueue = []}
}

_handle 函數先對進來的參數進行判斷，有的話就入隊列。然后看當前的狀態，是終態就處理上面的邏輯，最終清空隊列。否則就直接退出。PS：這里缺少了 finally 方法的處理代碼，我們在后面補上。此外還有就是關于異常的拋出問題，當 promise A 對象進入 rejected 狀態，此時，如果 promise.then 未提供 onrejected，則會拋出 error; 如果提供 onrejected，則不會，也就是有的資料中提到的 error 被“吃掉”了，這部分功能并未實現。

2.4、resolve 和 reject 實現

好了，到了這里基本上完成了大部分的工作了，但是還缺少了 resolve 和 reject 部分的代碼實現。無論是 resolve 還是 reject 函數，他們的功能都是兩個部分：

?修改狀態?觸發 onfulfilled/onrejected 回調（如果有的話）

我們都知道，Promise 屬于異步任務里的微任務，在構造函數里的代碼和 onfulfilled/onrejected 里的代碼都運行在主線程中。因此，我們需要模擬一個異步的過程，并且在定義多個 Promise 對象實例時保證一個時序，這里我們用 setTimeout，并在 setTimeout 中調用 _handle 函數。好的，我們來看 resolve 函數的具體實現。

function resolve(rs) {if(self.status === PRO_STATUS.PENDING) {/*** 在主線程修改狀態*/self.status = PRO_STATUS.FULFILLEDself.fulfilledValue = rssetTimeout(() => { /*** 模擬異步，但是這里有一個bug，setTimeout 并不準確，* 在 Promise.race 中有問題，主要是 setTimeout 執行間隔*/self._handle()})}
}

可以看到，首先判斷了當前狀態，確保只能第一個 resolve/reject 方法里面的代碼被執行去把 pending 狀態修改為終態，并且是在主線程中修改了狀態。另外注釋里標明了一個問題，我們使用了 setTimeout 去模擬異步，但是因為它本身延遲執行的特性，會帶來一些問題，比如下面的測試代碼：

const Promise = MyPromise
function race(){Promise.race([new Promise(resolve=>{setTimeout(()=>{resolve(1)}, 200)// 這里有一個bug？超時改成20看看}),new Promise((resolve, reject)=>{setTimeout(()=>{// resolve(2)reject(new Error('timeout'))}, 10)})]).then(res=>{log2('race res', {res})},err=>{log2('race err', {err})})
}

在注釋處修改為 20 會產生意外的效果。比照 resolve 函數的實現，我們可以很容易給出 reject 函數的代碼實現：

function reject(err){if(self.status === PRO_STATUS.PENDING) {self.status = PRO_STATUS.REJECTEDself.rejectedReason = errsetTimeout(() => {self._handle()})}
}