手写符合Promise/A+规范的Promise类

2022-03-23

看了一些有关Promise/A+规范实现的文章，也看了看V8源码中有关部分的实现，网上对Promise/A+的实现有很多，但很多与原生行为相去甚远，个人也尝试实现了一个，并尽量模拟原生行为，由于并没有(或者没找到)有关Promise符合原生行为的测试库，所以可能有漏洞，望指正。

代码仓库

https://github.com/LuHawXem/HandwrittenPromise

代码分析

定义用于存储回调函数的结点类PromiseReaction，存储当Promise完成(fulfilled或rejected)时的回调函数

/**
 * @class PromiseReaction
 * @constructor
 */
class PromiseReaction {
  /**
   * @param {Function} onResolveCallback Promise状态转换为fulfilled时执行的回调函数
   * @param {Function} onRejectCallback Promise状态转换为rejected时执行的回调函数
   * @param {PromiseReaction} next 指向下一个结点的指针
   */
  constructor(onResolveCallback, onRejectCallback, next) {
    if (!new.target) throw new TypeError(`${new.target} is not a reaction`);
    this.onResolveCallback = onResolveCallback;
    this.onRejectCallback = onRejectCallback;
    this.next = next;
  }
}

2.定义用于处理resolve过程的函数resolvePromise，由于resolve函数可以接受一个任意类型的实例作为参数，则其中包含各类基本类型及引用类型，以及Promise/A+规范中定义的thenable对象，所以需要进行多次类型判断，此处thenable对象的处理即个人进行测试与原生是否相符时的重点，thenable对象即一个存在then方法的对象，它可以是Promise对象(Promise的原型链上定义了then方法)，也可以是一个含有then方法的普通对象(如：{ then: x => x })，此两种thenable对象传入原生Promise的resolve时会表现出些微差别，此处将此种差别模拟出来，除此以外，promise不能等待自己完成自己，因此进行promise === x的判断，其他的非thenable类型均直接调用传入的resolve方法

/**
 * @param {SelfPromise} promise 需要resolve的promise
 * @param {any} x 用于resolve的值,可以是普通值,也可以是thenable或另一个promise
 * @param {Function} resolve 回调的resolve函数,可以不为promise的resolve函数(在递归调用时)
 * @param {Function} reject 回调的reject函数,可以不为promise的resolve函数(在递归调用时)
 * @returns {void}
 */
function resolvePromise(promise, x, resolve, reject) {
  if (promise === x) return reject(new TypeError("cylce chaining"));

  if (x !== null && (typeof x === "function" || typeof x === "object")) {
    let isCalled = false;
    try {
      let then = x.then;
      if (typeof then === "function") {
        /* thenable要在新的微任务中调用,于何处规定不明 */
        queueMicrotask(() => {
          try {
            then.call(
              x,
              (r) => {
                if (isCalled) return;
                isCalled = true;
                resolvePromise(promise, r, resolve, reject);
              },
              (e) => {
                if (isCalled) return;
                isCalled = true;
                reject(e);
              }
            );
          } catch (e) {
            if (isCalled) return;
            isCalled = true;
            reject(e);
          }
        });
      } else {
        if (isCalled) return;
        isCalled = true;
        resolve(x);
      }
    } catch (e) {
      if (isCalled) return;
      isCalled = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}

3.定义用于处理回调函数链表的函数，在V8代码中，Promise的回调函数/结果保存在字段reactions_or_result中，值可以为Zero、PromiseReaction和JSAny，分别表示无回调函数也无结果、回调函数链表(此时为pending状态)、完成结果(此时为fulfilled或rejected)，并且回调函数链表为反向链表，即第一个添加的结点会在链表尾部，因此在处理的时候需要先进行链表反转

/**
 * @param {PromiseReaction} reactions 回调链表
 * @param {any} result 结果值
 * @param {String} status promise的状态
 * @returns {void}
 */
function triggerPromiseReaction(reactions, result, status) {
  if (status === PromiseState.kPending) return;
	/* 链表反转 */
  let reversed = null;
  let cur = reactions;
  while (cur) {
    let current = cur.next;
    cur.next = reversed;
    reversed = cur;
    cur = current;
  }
	/* 判断状态执行回调,将if语句放在外减少判断次数 */
  cur = reversed;
  if (status === PromiseState.kFulfilled) {
    while (cur) {
      cur.onResolveCallback(result);
      cur = cur.next;
    }
  } else {
    while (cur) {
      cur.onRejectCallback(result);
      cur = cur.next;
    }
  }
}

4.SelfPromise类，目前只实现了构造函数，原型链上的then方法、catch方法，和静态的(即不在原型链上，在原对象上)resolve方法、reject方法，finally、all、race等其他一些方法暂未实现

4.1.构造函数接收一个函数作为参数，原生Promise给予的代码提示为(resolve: (value: any) => void, reject: (reason: any) => void) => void，个人实现的代码提示为(arg0: (value: any) => void, arg1: (reason: any) => void) => any，对JSDoc格式的注释还不太了解，献丑😃

将status和reactions_or_result添加到this对象上(JS的new本质上就是返回函数中的this对象)，V8代码中还有has_handler，handled_hint、async_task_id等一些字段，has_handler用于当Promise最终为rejected时判断是否存在rejected回调并打印错误提示信息，另外两个字段个人还没有发现是什么作用

实现fulfill、resolve和reject方法，fulfill为最终resolve过程，传入非thenable的值并执行回调，与reject相同；resolve方法调用上面的resolvePromise处理可能为thenable的传入值，resolve和reject方法都只在pending状态时执行(Promise的状态只能改变一次，当Promise完成之后，状态不可改变)

/**
  * @param {function(resolve, reject)} exec
  */
 constructor(exec) {
   if (!new.target) throw new TypeError(`${new.target} is not a promise`);
   if (typeof exec !== "function") throw new TypeError(`${exec} resolver is not a function`);

   const self = this;
   self.status = PromiseState.kPending;
   self.reactions_or_result = null;

   /**
    * @param {any} value
    */
   function fulfill(value) {
     self.status = PromiseState.kFulfilled;
     const reactions = self.reactions_or_result;
     self.reactions_or_result = value;
     triggerPromiseReaction(reactions, self.reactions_or_result, self.status);
   }

   /**
    * @param {any} value
    */
   function resolve(value) {
     if (self.status === PromiseState.kPending) {
       resolvePromise(self, value, fulfill, reject);
     }
   }

   /**
    * @param {any} reason
    */
   function reject(reason) {
     if (self.status === PromiseState.kPending) {
       self.status = PromiseState.kRejected;
       const reactions = self.reactions_or_result;
       self.reactions_or_result = reason;
       triggerPromiseReaction(
         reactions,
         self.reactions_or_result,
         self.status
       );
     }
   }

   try {
     exec(resolve, reject);
   } catch (e) {
     reject(e);
   }
 }

4.2.then方法，由于ES6中的class仅为语法糖，所以在类内部定义的非静态方法均会被添加到类的原型上，then方法的返回值为另一个promise以支持链式调用，对于不同的状态，then方法中的执行过程不同

当处于pending状态时，向原promise的reactions链表中添加新的reaction，此处调用的resolve和reject函数为新promise的resolve和reject函数，实现了promise的状态传递

当处于fulfilled或rejected状态时，直接将回调函数放入微任务执行

/**
  * @param {any} onFulfilled resolve的处理函数或undefined
  * @param {any} onRejected reject的处理函数或undefined
  * @returns {SelfPromise}
  */
 then(onFulfilled, onRejected) {
   onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;
   onRejected = typeof onRejected === "function" ? onRejected: (e) => { throw e; };

   const self = this;
   let promise = new SelfPromise((resolve, reject) => {
     switch (self.status) {
       case PromiseState.kPending:
         let reaction = new PromiseReaction(
           () => {
             queueMicrotask(() => {
               try {
                 let x = onFulfilled(self.reactions_or_result);
                 resolve(x);
               } catch (e) {
                 reject(e);
               }
             });
           },
           () => {
             queueMicrotask(() => {
               try {
                 let x = onRejected(self.reactions_or_result);
                 resolve(x);
               } catch (e) {
                 reject(e);
               }
             });
           }
         );
         reaction.next = self.reactions_or_result;
         self.reactions_or_result = reaction;
         break;
       case PromiseState.kFulfilled:
         queueMicrotask(() => {
           try {
             let x = onFulfilled(self.reactions_or_result);
             resolve(x);
           } catch (e) {
             reject(e);
           }
         });
         break;
       case PromiseState.kRejected:
         queueMicrotask(() => {
           try {
             let x = onRejected(self.reactions_or_result);
             resolve(x);
           } catch (e) {
             reject(e);
           }
         });
         break;
     }
   });
   return promise;
 }

4.3.catch方法，实为then方法的语法糖

/**
  * @param {any} onRejected
  * @returns {SelfPromise}
  */
 catch(onRejected) {
   return this.then(undefined, onRejected);
 }

4.4.静态的resolve和reject方法

/**
  * @param {any} value
  * @returns {SelfPromise}
  */
 static resolve(value) {
   if (value instanceof SelfPromise) {
     return value;
   }
   return new SelfPromise((resolve) => {
     resolve(value);
   });
 }

 /**
  * @param {any} reason
  * @returns {SelfPromise}
  */
 static reject(reason) {
   return new SelfPromise((_, reject) => {
     reject(reason);
   });
 }

4.5.Promise/A+测试所需的代码，promises-aplus-tests中规定的需要在adapter上定义一个deferred属性返回一个对象，对象上包含promise、resolve、reject属性

SelfPromise.deferred = function () {
  let dfd = {};
  dfd.promise = new SelfPromise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
};

最后

本人才疏学浅，若有错漏，望不吝赐教😃