采用Symbol和process.nextTick实现Promise

作者简介：slashhuang 研究型程序员现就职于爱屋吉屋

Promise已经成为处理Node.js异步流程的标配技术。

V8的async/await语法构筑在Promise之上、处理generator的co模块基于Promise实现。

处理http请求的axios、gulp4的构建流程、主流的测试框架mocha/ava等等都围绕Promise为开发者量身打造。

Promise的核心特点在于异步流程chaining、状态存储、then/catch条件分支明确、microtask处理等等。

为了对异步流程的处理更有把控力，笔者借鉴了V8的Promise.js源码和Promise A+的开源社区的实现，自己写了个Promise实现。

在数据结构上采用了链表模拟callback queue，在算法上面采用了process.nextTick来模拟microtask,在私有方法模拟上采用Symbol来实现。

下面我先给大家介绍下V8层面的Promise的实现，再分享下个人对Promise的实现方案。

V8 Promise的实现

下载完Node.js源码后，可以看到Promise的代码位置在deps/v8/src/js/promise.js。

在同一个文件夹下面还有个macros.py文件用来定义JS数据类型的方法和js到C++层面的counter。

基本可以认为macros.py只是个简单的bridge和util,这边不进行特别的讨论。

打开promise.js文件，基本可以看到两块语法，一块是标准的JS语法，一块是在JS层面添加%标示C++实现的代码。

后者的作用主要是在C++逐语句执行JS做的hook，将JS的control flow夺取过来。

Node.js中V8对promise.js实现的核心要点如下。

设置Promise的Symbol、Promise构造函数。
Promise状态从pending改变的处理逻辑PromiseHandle。
形成Promise的数据结构NewPromiseCapability。

由于是V8环境的js代码，所以promise.js的实现是function的堆叠，而且异步逻辑用%做了c++的hook,所以整体上不是特别适合阅读。

既然理顺了V8的Promise展示的主要逻辑点，我就顺藤摸瓜写了个easy模式的Promise,核心逻辑大概130行。

实现Promise的主逻辑

我们谋定后动，先做好数据结构和算法的选型。

定义数据结构

我们先看一个基本的使用形式

//经过100ms，改变p的状态为fulfilled、值为1let p = new Promise((res,rej)=>setTimeout(res,100,1));//100ms后，打印1,pNext状态为fulfilled、值为1let pNext = p.then(console.log)

如上是个简单的Promise使用范例。

要做到fn能够100ms后执行，p.then的作用势必只是将fn存储起来而已供100ms后调用。

同时fn的执行时机和p强挂钩，所以p和pNext存在引用接口。

针对以上功能点，then的方法逻辑基本要定如下的数据结构。

p能够拿到pNext的引用 pNext提供了接口给p,当p状态改变的时候执行这个接口进行通知。如上是我们的基本数据结构，很多同学可能会觉得很像pub/sub设计模式。

但是从数据结构的角度看，用链表来描述更贴切。

下面我们看下算法层面，如何实现microtask和接口通知。

定义microtask算法

如上由于then/catch的执行是一个microtask机制，因此要采用一个异步api模拟这种能力。在浏览器环境可以选型mutationObserver,在Node环境我这边是采用的process.nextTick。

到这边，算法和数据结构选型定的差不多了，下面我们就从Promise的constructor、then、catch来实现Promise。

定义constructor

constructor在形式上有一个executor函数参数，executor的参数是resolve/reject。

我们将resolve/reject定义在同一个namespace下面，并采用Symbol定义它们的方法名。

Symbol的主要好处是不可enumerate,这里不做过多讨论。

class Promise{    constructor(executor){    if(typeof executor!=='function'){        throw new TypeError(`${executor} is not a function`)    };    let resolveFn = val=>this[resolveSymbol](val);    let rejectFn = error=>this[rejectSymbol](error);    defineProperty(this,stateSymbol,pendingState)    try{       executor(resolveFn,resolveFn)    }catch(err){          rejectFn(err)    }   }   [resolveSymbol](val){    defineProperty(this,stateSymbol,fulfillState);    this.PromiseVal =  val;   }   [rejectSymbol](error){    defineProperty(this,stateSymbol,rejectState);    this.PromiseVal =  error;   }}

如上即为我们的第一步，基本上和Promise的构造函数使用方式保持了一致。

在resolve或者reject函数执行的时候，执行的功能是修改this的stateSymbol来标明它的状态是fulfilled还是rejected.

关于代码中的defineProperty，就是个简单的Obj[prop]=val的细致版本，为了专注主逻辑，这边也不多解释。

定义完constructor和resolve/reject函数后，我们就要考虑prototype.then/catch的逻辑了。

定义prototype.then和prototype.catch

then和catch要做两件事，第一件是存储microtask,另一件是如果状态不为pending要autoRun。

由于then和catch只是一个处理fulfill，一个处理reject而已，而且then如果有第二个参数也可以兼容catch的处理逻辑。

所以我把then和catch的逻辑归为一类，并定义[nextThenCatchSymbol]方法来处理。

class SuperPromise{    constructor(executor){    if(typeof executor!=='function'){      throw new TypeError(`${executor} is not a function`)    };    let resolveFn = val=>this[resolveSymbol](val);    et rejectFn = error=>this[rejectSymbol](error);    defineProperty(this,stateSymbol,pendingState)    try{       executor(resolveFn,resolveFn)    }catch(err){       rejectFn(err)    }    }   [resolveSymbol](val){    defineProperty(this,stateSymbol,fulfillState);    this.PromiseVal =  val;    this.RunLater()   }  [rejectSymbol](error){    defineProperty(this,stateSymbol,rejectState);    this.PromiseVal =  error;    this.RunLater()  } [nextThenCatchSymbol](fnArr,type){    //将then和catch方法归为一类    let method = 'resolve';    let resolveFn = fnArr[0];    let rejectFn = fnArr[1];    if(type=='catch'){        method = 'catch';        rejectFn = fnArr[0];    };    return new Promise((res,rej)=>{}) } then(fn,fn1){    return this[nextThenCatchSymbol]([fn,fn1],'resolve') } catch(fn){    return [nextThenCatchSymbol]([fn],'reject') }}

如上[nextThenCatchSymbol]返回了一个空的Promise，没有定义接口也没有任何功能。为了实现chaining，必须给这个空Promise定义接口，同时将它添加进chain上一级的microtask.

于是改造这个function如下

[nextThenCatchSymbol](fnArr,type){    let method = 'resolve';    let resolveFn = fnArr[0];    let rejectFn = fnArr[1];    if(type=='catch'){        method = 'catch';        rejectFn = fnArr[0];    };    //返回新的Promise,pending状态    let newPromise =  new SuperPromise((resolve,reject)=>{});    //添加对外接口    newPromise[resolveFnSymbol]=function(val){        let nextValue = resolveFn(val);        if(nextValue instanceof SuperPromise){            nextValue.then(val=>{                this[resolveSymbol](val)            })        }else{            this[resolveSymbol](nextValue)        }    }    newPromise[rejectFnSymbol]=function(val){        let nextValue = rejectFn(val);        if(nextValue instanceof SuperPromise){            nextValue.catch(val=>{                this[rejectSymbol](val)            })        }else{            this[rejectSymbol](nextValue)        }    }    //在上个Promise内部注册microtask    this.microtask = {        newPromise     };    //microtask异步执行    this.RunLater();    return newPromise}

如上我们手动给newPromise指定了两个接口[rejectFnSymbol],[resolveFnSymbol],

同时在上个Promise实例上挂了microtask，并立即执行了Runlater。

写到这里，大部分的数据结构已经完成，接下来就是Runlater方法的实现。

let RunLater = process.nextTick;RunLater(){    if(!this.microtask){        return     }    let state =  this[stateSymbol];    let PromiseVal = this.PromiseVal;    let { newPromise } = this.microtask;    let hookFn= '';    if(state == fulfillState || state == rejectState){    hookFn = state == fulfillState?resolveFnSymbol:rejectFnSymbol;    RunLater(()=>newPromise[hookFn](PromiseVal))    }}

RunLater的逻辑很简单，就是根据当前的promise的情况来决定是执行resolve还是reject的逻辑而已。

阶段性总结

写到这边，大部分的逻辑都已经实现完毕。

我们接下来看下如何实现state存储和多级嵌套。

当then(fn)执行的时候，如果是个普通值就直接把promise的值改为那个值即可。

如果fn执行返回的是一个Promise，我们必须把当前的Promise挂钩在返回的Promise上面。

要实现后者其实很简单，只需要将当前的Promise挂在fn()的结果后面接口实现依赖关系的转换。fn().then(val=>this[resolveSymbol])

newPromise[resolveFnSymbol]=function(val){    let nextValue = resolveFn(val);    if(nextValue instanceof SuperPromise){        nextValue.then(val=>{            this[resolveSymbol](val)        })    }else{        this[resolveSymbol](nextValue)    }}

写到这里，Promise的chaining , microTask，state track等基本已经实现完毕。

有兴趣的同学，可以看我的源码实现Promise实现

结语

Promise对于Node.js开发者来说是个技术标配，研究它对于异步处理技巧的理解也是大有好处。

希望通过本文能够给大家一个直观的Promise实现机理。

接下来几篇文章，我将参考Tj大神的co重新写一个co,同时对Node.js内部bootstrap过程分项下个人心得。

作者专栏：https://zhuanlan.zhihu.com/slashhuang