概述

從上次更新Promise/A+規范后，已經很久沒有更新博客了。之前由于業務需要，完成了一個TypeScript語言的Promise庫。這次我們來和大家一步一步介紹下，我們如何實現一個符合Promise/A+規范的Promise庫。

如果對Promise/A+規范還不太了解的同學，建議先看看上一篇博客——?[譯]前端基礎知識儲備——Promise/A+規范?。

實現流程

首先，我們來看下，在我實現的這一個Promise中，代碼由下面這幾部分組成：

• 全局異步函數執行器
• 常量與屬性
• 類方法
• 類靜態方法

通過上面這四個部分，我們就能夠得到一個完整的Promise。這四個部分互相有關聯，接下來我們一個一個模塊來看。

全局異步函數執行器

在之前的Promiz的源碼分析的博客中我有提到過，我們如何來實現一個異步函數執行器。通過JavaScript的執行原理我們可以知道，如果要實現異步執行相關函數的話，我們可以選擇使用宏任務和微任務，這一點在Promise/A+的規范中也有提及。因此，下面我們提供了一個用宏任務來實現異步函數執行器的代碼供大家參考。

let index = 0;if (global.postMessage) {global.addEventListener('message', (e) => {if (e.source === global) {let id = e.data;if (isRunningTask) {nextTick(functionStorage[id]);} else {isRunningTask = true;try {functionStorage[id]();} catch (e) {}isRunningTask = false;}delete functionStorage[id];functionStorage[id] = void 0;}});
}function nextTick(func) {if (global.setImmediate) {global.setImmediate(func);} else if (global.postMessage) {functionStorage[++index] = func;global.postMessage(index, '*')} else {setTimeout(func);}
}
復制代碼

通過上面的代碼我們可以看到，我們一共使用了setImmediate、postMessage、setTimeout這三個添加宏任務的方法來進行一步函數執行。

常量與屬性

說完了如何進行異步函數的執行，我們來看下相關的常量與屬性。在實現Promise之前，我們需要定義一些常量和類屬性，用于后面存儲數據。讓我們一個一個來看下。

常量

首先，Promise共有5個狀態，我們需要用常量來進行定義，具體如下：

enum State {pending = 0,resolving = 1,rejecting = 2,resolved = 3,rejected = 4
};
復制代碼

這五個常量分別對應Promise中的5個狀態，相信大家能夠從名字中理解，我們就不多講了。

屬性

在Promise中，我們需要一些屬性來存儲數據狀態和后續的Promise引用，具體如下：

class Promise {private _value;private _reason;private _next = [];public state: State = 0;public fn;public er;
}
復制代碼

我們對屬性進行逐一說明：

• _value，表示在resolved狀態時，用來存儲當前的值。
• _reason，表示在rejected狀態時，用來存儲當前的原因。
• _next，表示當前Promise后面跟著then函數的引用。
• fn，表示當前Promise中的then方法的第一個回調函數。
• er，表示當前Promise中的then方法的的第二個回調函數（即catch的第一個參數，下面看catch實現方法就能理解）。

類方法

看完了常量與類的屬性，我們來看下類的靜態方法。

Constructor

首先，如果我們要實現一個Promise，我們需要一個構造函數來初始化最初的Promise。具體代碼如下：

class Promise {constructor(resolver?) {if (typeof resolver !== 'function' && resolver !== undefined) {throw TypeError()}if (typeof this !== 'object') {throw TypeError()}try {if (typeof resolver === 'function') {resolver(this.resolve.bind(this), this.reject.bind(this));}} catch (e) {this.reject(e);}}
}
復制代碼

從Promise/A+的規范來看，我們可以知道，如果resolver存在并且不是一個function的話，那么我們就應該拋出一個錯誤；否則，我們應該將resolve和reject方法傳給resolver作為參數。

resolve && reject

那么，resolve和reject方法又是做什么的呢？這兩個方法主要是用來讓當前的這個Promise轉換狀態的，即從pending狀態轉換為resolving或者rejecting狀態。下面讓我們來具體看下代碼：

class Promise {resolve(value) {if (this.state === State.pending) {this._value = value;this.state = State.resolving;nextTick(this._handleNextTick.bind(this));}return this;}reject(reason) {if (this.state === State.pending) {this._reason = reason;this.state = State.rejecting;this._value = void 0;nextTick(this._handleNextTick.bind(this));}return this;}
}
復制代碼

從上面的代碼中我們可以看到，當resolve或者reject方法被觸發時，我們都改變了當前這個Proimse的狀態，并且異步調用執行了_handleNextTick方法。狀態的改變標志著當前的Promise已經從pending狀態改變成了resolving或者rejecting狀態，而相應_value和_reson也表示上一個Promise傳遞給下一個Promise的數據。

那么，這個_handleNextTick方法又是做什么的呢？其實，這個方法的作用很簡單，就是用來處理當前這個Promise后面跟著的then函數傳遞進來的回調函數fn和er。

then && catch

在了解_handleNextTick之前，我們們先看下then函數和catch函數的實現。

class Promise {public then(fn, er?) {let promise = new Promise();promise.fn = fn;promise.er = er;if (this.state === State.resolved) {promise.resolve(this._value);} else if (this.state === State.rejected) {promise.reject(this._reason);} else {this._next.push(promise);}return promise;}public catch(er) {return this.then(null, er);}
}
復制代碼

因為catch函數調用就是一個then函數的別名，我們下面就只討論then函數。

在then函數執行時，我們會創建一個新的Promise，然后將傳入的兩個回調函數用新的Promise的屬性保存下來。然后，先判斷當前的Promise的狀態，如果已經是resolved或者rejected狀態時，我們立即調用新的Promise中resolve或者reject方法，讓下將當前Promise的_value或者_reason傳遞給下一個Promise，并且觸發下一個Promise的狀態改變。如果當前Promise的狀態仍然為pending時，那么就將這個新生成的Promise保存下來，等當前這個Promise的狀態改變后，再觸發新的Promise變化。最后，我們返回了這個Promise的實例。

handleNextTick

看完了then函數，我們就可以來看下我們提到過的handleNextTick函數。

class Promise {private _handleNextTick() {try {if (this.state === State.resolving && typeof this.fn === 'function') {this._value = this.fn.call(getThis(), this._value);} else if (this.state === State.rejecting && typeof this.er === 'function') {this._value = this.er.call(getThis(), this._reason);this.state = 1;}} catch (e) {this.state = State.rejecting;this._reason = e;this._value = void 0;this._finishThisTypeScriptPromise();}// if promise === x, use TypeError to reject promise// 如果promise和x指向同一個對象，那么用TypeError作為原因拒絕promiseif (this._value === this) {this.state = State.rejecting;this._reason = new TypeError();this._value = void 0;}this._finishThisTypeScriptPromise();}
}
復制代碼

我們先來看一個簡單版的_handleNextTick函數，這樣能夠幫助我們快速理解Promise主流程。

異步觸發了_handleNextTick函數后，我們會判斷當前用戶處于的狀態，如果當前Promise是resolving狀態，我們就會調用fn函數，即我們在then函數調用時給新的Promise設置的那個fn函數；而如過當前Promise是rejecting狀態，我們就會調用er函數。

上面提到的getThis方法是用來獲取特定的this值，具體的規范要求我們將在稍后再進行介紹。

通過執行這兩個同步的fn或er函數，我們能夠得到當前Promise執行完傳入回調后的值。在這里需要說明的是：我們在執行fn或者er函數之前，我們在_value和_reason中存放的值，是上一個Promise傳遞下來的值。只有當執行完了fn或者er函數后，_value和_reason中存放的值才是我們需要傳遞給下一個Promise的值。

大家到這里可能會奇怪，我們的this指向沒有發生變化，但是為什么我們的this指向的是那個新的Promise，而不是原來的那個Promise呢？

我們可以從另外一個角度來看待這個問題：我們當前的這個Promise是不是由上一個Promise所產生的呢？如果是這種情況的話，我們就可以理解，在上一個Promise產生當前Promise的時候，就設置了fn和er兩個函數。

大家可能又會問，那么我們第一個Promise的fn和er這兩個參數是怎么來的呢？

那么我們就需要仔細看下上面這個邏輯了。下面我們只討論第一個Promise處于pending的情況，其余的情況與這種情形基本相同。第一個Promise因為沒有上一個Promise去設置fn和er兩個參數，因此這兩個參數的值就是undefined。所以在上面的邏輯中，我們已經排除了這種情況，直接進入了_finishThisTypeScriptPromise函數中。

我們在這里需要特別說明下的是，有些人會認為我們在調用then函數傳入的兩個回調函數fn和er時，當前Promise就結束了，其實并不是這樣，我們是得到了fn或者er兩個函數的返回值，再將值傳遞給下一個Promise時，上一個Promise才會結束。關于這個邏輯我們可以看下_finishThisTypeScriptPromise函數。

finishThisTypeScriptPromise

_finishThisTypeScriptPromise函數的代碼如下：

class Promise {private _finishThisTypeScriptPromise() {if (this.state === State.resolving) {this.state = State.resolved;this._next.map((nextTypeScriptPromise) => {nextTypeScriptPromise.resolve(this._value);});} else {this.state = State.rejected;this._next.map((nextTypeScriptPromise) => {nextTypeScriptPromise.reject(this._reason);});}}
}
復制代碼

從_finishThisTypeScriptPromise函數中我們可以看到，我們在得到了需要傳遞給下一個Promise的_value或者_reason后，利用map方法逐個調用我們保存的新生成的Promise實例，調用它的resolve方法，因此我們又觸發了這個Promise的狀態從pending轉變為resolving或者rejecting。

到這里我們就已經完全了解了一個Promise從最開始的創建，到最后結束的整個生命周期。下面我們來看下在Promise/A+規范中提到的一些分支邏輯的處理情況。

上一個Promise傳遞的value是Thenable實例

首先，讓我們來了解下什么是Thenable實例。Thenable實例指的是屬性中有then函數的對象。Promise就是的一種特殊的Thenable對象。

下面，為了方便講解，我們將用Promise來代替Thenable進行講解，其他的Thenable類大家可以參考類似思路進行分析。

如果我們在傳遞給我們的_value中是一個Promise實例，那么我們必須在等待傳入的Promise狀態轉換到resolved之后，當前的Promise才能夠繼續往下執行，即我們從傳入的Promise中得到了一個非Thenable返回值時，我們才能用這個值來調用屬性中的fn或者er方法。

那么，我們要怎么樣才能獲取到傳入的這個Promise的返回值呢？在Promise中其實用到了一個非常巧妙的方法：因為傳入的Promise中有一個then函數（Thenable定義），因此我們就調用then函數，在第一個回調函數fn中傳入獲取_value，觸發當前的Promise繼續執行。如果是觸發了第二個回調函數er，那么就用在er中得到的_reason來拒絕掉當前的Promise。具體判斷邏輯如下：

class Promise {private _handleNextTick() {let ref;let count = 0;try {// 判斷傳入的this._value是否為一個thanable// check if this._value a thenableref = this._value && this._value.then;} catch (e) {this.state = State.rejecting;this._reason = e;this._value = void 0;return this._handleNextTick();}if (this.state !== State.rejecting && (typeof this._value === 'object' || typeof this._value === 'function') && typeof ref === 'function') {// add a then function to get the status of the promise// 在原有TypeScriptPromise后增加一個then函數用來判斷原有promise的狀態try {ref.call(this._value, (value) => {if (count++) {return;}this._value = value;this.state = State.resolving;this._handleNextTick();}, (reason) => {if (count++) {return;}this._reason = reason;this.state = State.rejecting;this._value = void 0;this._handleNextTick();});} catch (e) {this.state = State.rejecting;this._reason = e;this._value = void 0;this._handleNextTick();}} else {try {if (this.state === State.resolving && typeof this.fn === 'function') {this._value = this.fn.call(getThis(), this._value);} else if (this.state === State.rejecting && typeof this.er === 'function') {this._value = this.er.call(getThis(), this._reason);this.state = 1;}} catch (e) {this.state = State.rejecting;this._reason = e;this._value = void 0;this._finishThisTypeScriptPromise();}this._finishThisTypeScriptPromise();}}
}
復制代碼

promise === value

在Promise/A+規范中，如果返回的_value值等于用戶自身時，需要用TypeError錯誤拒絕掉當前的Promise。因此我們需要在_handleNextTick中加入以下判斷代碼：

class Promise {private _handleNextTick() {let ref;let count = 0;try {// 判斷傳入的this._value是否為一個thanable// check if this._value a thenableref = this._value && this._value.then;} catch (e) {this.state = State.rejecting;this._reason = e;this._value = void 0;return this._handleNextTick();}if (this.state !== State.rejecting && (typeof this._value === 'object' || typeof this._value === 'function') && typeof ref === 'function') {// add a then function to get the status of the promise// 在原有TypeScriptPromise后增加一個then函數用來判斷原有promise的狀態...} else {try {if (this.state === State.resolving && typeof this.fn === 'function') {this._value = this.fn.call(getThis(), this._value);} else if (this.state === State.rejecting && typeof this.er === 'function') {this._value = this.er.call(getThis(), this._reason);this.state = 1;}} catch (e) {this.state = State.rejecting;this._reason = e;this._value = void 0;this._finishThisTypeScriptPromise();}// if promise === x, use TypeError to reject promise// 如果promise和x指向同一個對象，那么用TypeError作為原因拒絕promiseif (this._value === this) {this.state = State.rejecting;this._reason = new TypeError();this._value = void 0;}this._finishThisTypeScriptPromise();}}
}
復制代碼

getThis

在Promise/A+規范中規定：我們在調用fn和er兩個回調函數時，this的指向有限制。在嚴格模式下，this的值應該為undefined；在寬松模式下時，this的值應該為global。

因此，我們還需要提供一個getThis函數用于處理上述情況。具體代碼如下：

class Promise {...
}function getThis() {return this;
}
復制代碼

類靜態方法

我們通過上面說到的類方法和一些特定分支的邏輯處理，我們就已經實現了一個符合基本功能的Promise類。那么，下面我們來看下ES6中提供的一些標準API我們如何來進行實現。具體API如下：

• resolve
• reject
• all
• race

下面我們就一個一個方法來看下。

resolve && reject

首先我們來看下最簡單的resolve和reject方法。

class Promise {public static resolve(value?) {if (TypeScriptPromise._d !== 1) {throw TypeError();}if (value instanceof TypeScriptPromise) {return value;}return new TypeScriptPromise((resolve) => {resolve(value);});}public static reject(value?) {if (TypeScriptPromise._d !== 1) {throw TypeError();}return new TypeScriptPromise((resolve, reject) => {reject(value);});}
}
復制代碼

通過上面代碼我們可以看到，resolve和reject方法基本上就是直接使用了內部的constructor方法進行Promise構建。

all

class Promise {public static all(arr) {if (TypeScriptPromise._d !== 1) {throw TypeError();}if (!(arr instanceof Array)) {return TypeScriptPromise.reject(new TypeError());}let promise = new TypeScriptPromise();function done() {// 統計還有多少未完成的TypeScriptPromise// count the unresolved promiselet unresolvedNumber = arr.filter((element) => {return element && element.then;}).length;if (!unresolvedNumber) {promise.resolve(arr);}arr.map((element, index) => {if (element && element.then) {element.then((value) => {arr[index] = value;done();return value;});}});}done();return promise;}
}
復制代碼

下面我們根據上面的代碼來簡單說下all函數的基本思路。

首先我們需要先創建一個新的Promise用于返回，保證后面用戶調用then函數進行后續邏輯處理時可以設置新Promise的fn和er這兩個回調函數。

然后，我們怎么獲取上面Promise數組中每一個Promise的值呢？方法很簡單，我們在前面就已經介紹過：我們調用了每一個Promise的then函數用來獲取當前這個Promise的值。并且，在每個Promise完成時，我們都檢查下是否所有的Promise都已經完成，如果已經完成，則觸發新Promise的狀態從pending轉換為resolving或者rejecting。

race

class Promise {public static race(arr) {if (TypeScriptPromise._d !== 1) {throw TypeError();}if (!(arr instanceof Array)) {return TypeScriptPromise.reject(new TypeError());}let promise = new TypeScriptPromise();function done(value?) {if (value) {promise.resolve(value);}let unresolvedNumber = arr.filter((element) => {return element && element.then;}).length;if (!unresolvedNumber) {promise.resolve(arr);}arr.map((element, index) => {if (element && element.then) {element.then((value) => {arr[index] = value;done(value);return value;});}});}done();return promise;}
}
復制代碼

race的思路與all基本一致。只是我們在處理函數上不同。當我們只要檢測到數組中的Promise有一個已經轉換到了resolve或者rejected狀態（通過沒有then函數來進行判斷）時，就會立即出發新創建的Promise示例的狀態從pending轉換為resolving或者rejecting。

總結

我們對Promise的異步函數執行器、常量與屬性、類方法、類靜態方法進行了逐一介紹，讓大家對整個Promise的構造和聲明周期有了一個深度的理解和認知。在整個開發中需要注意到的一些關鍵點和細節，我在上面也一一說明了。大家只需要按照這個思路，對照Promise/A+規范就能夠完成一個符合規范的Promise庫。

最后，給大家提供一個Promise/A+測試工具，大家實現了自己的Promise后，可以使用這個工具來測試是否完全符合整個Promise/A+規范。當然，大家如果想使用我的現成代碼，也歡迎大家使用我的代碼Github/typescript-proimse。