手写一个promise

本文遵循的Promise/A+规范实现一个简略版本Promise, 用代码理解规范中的每一句话.

Promise/A+英文版规范, 中文版规范;
es6中Promise完整规范
浏览器中Promise实现

Promise 的状态

规范描述

一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、完成态（Fulfilled）和拒绝态（Rejected）。

等待态（Pending）
处于等待态时，promise 需满足以下条件：
- 可以迁移至执行态或拒绝态
完成态（Fulfilled）
处于执行态时，promise 需满足以下条件：
- 不能迁移至其他任何状态
- 必须拥有一个不可变的终值
拒绝态（Rejected）
处于拒绝态时，promise 需满足以下条件：
- 不能迁移至其他任何状态
- 必须拥有一个不可变的据因

代码实现

采用类实现:

class MyPromise {
}

实现构造函数:

const _ = require('lodash');

const PENDING = 0;
const FULFILLED = 1;
const REJECTED = 2;

class MyPromise {
  constructor(executor) {
    if (!(this instanceof MyPromise)) {
      throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");
    }
    if (!_.isFunction(executor)) {
      throw new TypeError('You must pass a resolver function as the first argument to the promise constructor');
    }
    this._status = PENDING;
    this._value = undefined;
    this._thenCallbacks = [];
    this._reason = undefined;
    try {
      executor((...args) => this._resolve(...args), (...args) => this._reject(...args));
    } catch(e) {
      this._reject(e);
    }
  }
}

在构造函数中, 首先处理函数边界, 然后初始化状态,终值(_value), 拒因(_reason)和then的回调函数队列; 最后调用传入的executor.executor中用于控制Promise状态的变化.传递两个回调函数作为参数，第一个参数叫做resove，第二个参数叫做 reject, 在对象中的处理处理逻辑为:

_resolve(value) {
    if (this._status !== PENDING) {
      return;
    }
    this._status = FULFILLED;
    this._value = value;
  }

  _reject(reason) {
    if (this._status !== PENDING) {
      return;
    }
    this._status = REJECTED;
    this._reason = reason;
  }

_resolve, _reject有状态边界判断, 如果被调用多次, 采用首次调用并忽略剩下的调用._resolve中只允许等待态转为完成态,然后接收终值._reject中只允许等待态转为拒绝态, 然后接收拒因.

状态的判断保证_resolve, _reject中主要逻辑在当前promise中最多被执行一次: 状态最多改变一次;then的回调函数最多调用一次.

Then函数

规范描述

一个promise必须提供一个then方法以访问其当前值、终值和据因。
promise的then方法接受两个参数：

promise.then(onFulfilled, onRejected)

参数可选

onFulfilled和onRejected都是可选参数。

如果onFulfilled不是函数，其必须被忽略
如果onRejected不是函数，其必须被忽略

`onFulfilled`特性

如果onFulfilled是函数：

当promise执行结束后其必须被调用，其第一个参数为promise的终值
在promise执行结束前其不可被调用
其调用次数不可超过一次

调用时机

onFulfilled和onRejected只有在执行环境堆栈仅包含平台代码时才可被调用

调用要求

onFulfilled和onRejected必须被作为函数调用（即没有 this 值）注2

多次调用

then方法可以被同一个promise调用多次

当promise成功执行时，所有onFulfilled需按照其注册顺序依次回调
当promise被拒绝执行时，所有的onRejected需按照其注册顺序依次回调

then方法必须返回一个promise对象

promise2 = promise1.then(onFulfilled, onRejected);

如果onFulfilled或者onRejected返回一个值 x ，则运行下面的Promise解决过程：[[Resolve]](promise2, x)
如果onFulfilled或者onRejected抛出一个异常e，则promise2必须拒绝执行，并返回拒因e
如果onFulfilled不是函数且promise1成功执行，promise2必须成功执行并返回相同的值
如果 onRejected 不是函数且promise1拒绝执行，promise2必须拒绝执行并返回相同的据因

代码实现

需要在构造函数添加回调函数队列:

constructor(executor) {
    // ...
    this._value = undefined;
    this._thenCallbacks = [];
    this._reason = undefined;
    // ...
  }

首先, 实现一个then函数.由于本章节代码牵扯到很多部分, 所以尽量用代码注释来说明实现的规范:

then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是函数，其必须被忽略
    const _onFulfilled = _.isFunction(onFulfilled) ? onFulfilled : void 0;
    // 如果 onRejected 不是函数，其必须被忽略
    const _onRejected = _.isFunction(onRejected) ? onRejected : void 0;

    // then 方法可以被同一个 promise 调用多次
    this._thenCallbacks.push([_onFulfilled, _onRejected]);

    return new MyPromise((resolve, reject) => {
      // 等待实现
    });
  }

onFulfilled和onRejected, 需要在_resove或者reject时被调用, 将resolve, reject改造为:

_resolve(value) {
    if (this._status !== PENDING) {
      return;
    }
    this._status = FULFILLED;
    this._value = value;
    // 如果then的回调函数onFulfilled, onRejected为函数的话, 需要
    // 在 promise 执行结束前其不可被调用,当 promise 执行结束后其必须被调用
    // 其调用次数不可超过一次
    // 只有在执行环境堆栈仅包含平台代码时才可被调用 
    process.nextTick(this._callThenCallbacks);
  }

  _reject(reason) {
    if (this._status !== PENDING) {
      return;
    }
    this._status = REJECTED;
    this._reason = reason;
    // 如果then的回调函数onFulfilled, onRejected为函数的话, 需要
    // 在 promise 执行结束前其不可被调用,当 promise 执行结束后其必须被调用
    // 其调用次数不可超过一次
    // 只有在执行环境堆栈仅包含平台代码时才可被调用 
    process.nextTick(this._callThenCallbacks);
  }

虽然规范中没有说明onFulfilled和onRejected必需为微任务(micro-task)还是宏任务(macro-task),但是其他实现基本都是基于微任务.

这里由于本文只是在node环境实现,所以采用process.nextTick来启用微任务, 为了跨平台, 一般的Promise实现框架, 都会使用多种方式来实现在执行环境堆栈仅包含平台代码时才可被调用, 如MutationObserver, MessageChannel, vertx等, 最后可能使用setTimeout实现.

按照Promise/A+规范来说,onFulfilled和onRejected只有在执行环境堆栈仅包含平台代码时才可被调用, 但是在nodejs或者es6环境中的Promise对象, 需要像下面的实现:

_resolve(value) {
    // 只有在执行环境堆栈仅包含平台代码时才可被调用 
    process.nextTick(() => {
      if (this._status !== PENDING) {
        return;
      }
      this._status = FULFILLED;
      this._value = value;
      // 如果then的回调函数onFulfilled, onRejected为函数的话, 需要
      // 在 promise 执行结束前其不可被调用,当 promise 执行结束后其必须被调用
      // 其调用次数不可超过一次
      // 只有在执行环境堆栈仅包含平台代码时才可被调用 
      // process.nextTick(() => this._callThenCallbacks());
      this._callThenCallbacks();
    });
  }

  _reject(reason) {
    // 只有在执行环境堆栈仅包含平台代码时才可被调用 
    process.nextTick(() => {
      if (this._status !== PENDING) {
        return;
      }
      this._status = REJECTED;
      this._reason = reason;
      // 如果then的回调函数onFulfilled, onRejected为函数的话, 需要
      // 在 promise 执行结束前其不可被调用,当 promise 执行结束后其必须被调用
      // 其调用次数不可超过一次
      // process.nextTick(() => this._callThenCallbacks());
      this._callThenCallbacks();
    });
  }

对于比较流行的prmise polyfill库es-promise的实现,采用的是上面一种启用微任务的时机, 对于babel中的垫片core-js中实现的promise, 采用的是下一种启用时机.

Then函数.返回规范有复杂的要求,为了实现这些要求, 需要改变上面的then函数的实现:

then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是函数，其必须被忽略
    const _onFulfilled = _.isFunction(onFulfilled) ? onFulfilled : void 0;
    // 如果 onRejected 不是函数，其必须被忽略
    const _onRejected = _.isFunction(onRejected) ? onRejected : void 0;
    
    let childResolve;
    let childReject;
    const childPromise = new MyPromise((resolve, reject) => {
      childResolve = resolve;
      childReject = reject;
    });

    // then 方法可以被同一个 promise 调用多次
    this._thenCallbacks.push([_onFulfilled, _onRejected, childResolve, childReject]);

    return childPromise;
  }

_callThenCallbacks用于处理在promise状态改变后处理then回调函数队列. 在处理每一个then回调函数后, 还需要对于then回调函数返回的结果, 结合当前的promise状态,调整当前then函数返回的promise2的状态:

  // 调用then回调函数队列
  _callThenCallbacks() {
    if (_.isEmpty(this._thenCallbacks)) {
      return;
    }
    this._thenCallbacks.forEach(([onFulfilled, onRejected, childResolve, childReject]) => {
      try {
        if (this._status === FULFILLED && !onFulfilled) {
          // 如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
          childResolve(this._value);
          return;
        }
        if (this._status === REJECTED && !onRejected) {
          // 如果 onRejected 不是函数且 promise1 拒绝执行, promise2 必须拒绝执行并返回相同的据因
          childReject(this._reason);
        }
        let x;
        if (this._status === REJECTED && onRejected) {
          // 当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调
          // 其第一个参数为 promise 的拒因
          // 必须被作为函数调用（即没有 this 值）
          x = onRejected(this._reason);
        } else if (this._status === FULFILLED && onFulfilled) {
          // 当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
          // 其第一个参数为 promise 的终值
          // 必须被作为函数调用（即没有 this 值）
          x = onFulfilled(this._value);
        }
        // 如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行下面的 Promise 解决过程
        this._resolvePromise(x, childResolve, childReject);
      } catch (error) {
        childReject(error);
      }
    });
  }

其中_resolvePromise代表Promise解决过程, 将在下文说明.

Promise解决过程

规范描述

Promise解决过程是一个抽象的操作，其需输入一个promise和一个值，我们表示为[[Resolve]](promise, x)，如果x有then 方法且看上去像一个Promise，解决程序即尝试使promise接受x的状态；否则其用x的值来执行 promise 。

这种thenable的特性使得Promise的实现更具有通用性：只要其暴露出一个遵循 Promise/A+ 协议的then方法即可；这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存。

运行[[Resolve]](promise, x)需遵循以下步骤：

x与promise相等
如果x为Promise，则使promise 接受x`的状态：
- 如果x处于等待态，promise需保持为等待态直至x被执行或拒绝
- 如果x处于执行态，用相同的值执行promise
- 如果x处于拒绝态，用相同的据因拒绝promise
x为对象或函数
如果x为对象或者函数：
- 把x.then赋值给then
- 如果取x.then的值时抛出错误e，则以e为据因拒绝promise
- 如果then是函数，将x作为函数的作用域this调用之。传递两个回调函数作为参数，第一个参数叫做resolvePromise，第二个参数叫做rejectPromise:
  - 如果resolvePromise以值y为参数被调用，则运行[[Resolve]](promise, y)
  - 如果rejectPromise以据因r为参数被调用，则以据因r拒绝promise
  - 如果resolvePromise和rejectPromise均被调用，或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
  - 如果调用then方法抛出了异常e：
    - 如果resolvePromise或rejectPromise已经被调用，则忽略之
    - 否则以e为据因拒绝promise
  - 如果then不是函数，以x为参数执行promise
如果x不为对象或者函数，以x为参数执行promise`

如果一个promise被一个循环的thenable链中的对象解决，而[[Resolve]](promise, thenable)的递归性质又使得其被再次调用，根据上述的算法将会陷入无限递归之中。算法虽不强制要求，但也鼓励施者检测这样的递归是否存在，若检测到存在则以一个可识别的TypeError为据因来拒绝promise.

代码实现

函数_resolvePromise实现, 采用代码注释说明:

// Promise 解决过程
  _resolvePromise(x, childResolve, childReject) {
    // x 与 promise 相等
    if (x === this) {
      // 如果 promise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 promise
      throw new TypeError("You cannot resolve a promise with itself");
    }
    // 如果 x 为 Promise ，则使 promise 接受 x 的状态
    if (x instanceof MyPromise) {
      // 如果 x 处于等待态
      console.log('======PENDING===', x._status);
      if (x._status === PENDING) {
        // promise 需保持为等待态直至 x 被执行或拒绝
        x.then(childResolve, childReject);
        return;
      }
      // 如果 x 处于执行态
      if (x._status === FULFILLED) {
        // 用相同的值执行 promise
        childResolve(x._value);
        return;
      }
      // 如果 x 处于执行态
      if (x._status === REJECTED) {
        // 用相同的值执行 promise
        childReject(x._reason);
        return;
      }
    }
    // x 为对象或函数
    if (_.isObject(x) || _.isFunction(x)) {
      // 把 x.then 赋值给 then
      let then;
      try {
        then = x.then;
      } catch (error) {
        // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
        // 其实这里不需要捕获, 因为最外层有捕获, 这里为了保持跟规范一致
        childReject(error);
        return;
      }
      // 如果 then 是函数
      if (_.isFunction(then)) {
        // 将 x 作为函数的作用域 this 调用之
        let called = false;
        try {
          then.call(x, (y) => {
            // 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次,
            // 则优先采用首次调用并忽略剩下的调用
            if (called) {
              return;
            }
            called = true;
  
            // 如果 resolvePromise 以值 y 为参数被调用
            this._resolvePromise(y, childResolve, childReject);
          }, (r) => {
            // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
            if (called) {
              return;
            }
            called = true;
  
            // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
            childReject(r);
          }); 
        } catch (error) {
          // 如果调用 then 方法抛出了异常 e

          // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
          if (called) {
            return;
          }

          // 否则以 e 为据因拒绝 promise
          childReject(error);
        }
        return;
      }
      // 如果 then 不是函数, 以 x 为参数执行 promise
      childResolve(x);
      return;
    }
    // 如果 x 不为对象或者函数, 以 x 为参数执行 promise
    childResolve(x);
  }

全部代码

const _ = require('lodash');

const PENDING = 0;
const FULFILLED = 1;
const REJECTED = 2;

class MyPromise {
  constructor(executor) {
    if (!(this instanceof MyPromise)) {
      throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");
    }
    if (!_.isFunction(executor)) {
      throw new TypeError('You must pass a resolver function as the first argument to the promise constructor');
    }
    this._status = PENDING;
    this._value = undefined;
    this._thenCallbacks = [];
    this._reason = undefined;
    try {
      executor((...args) => this._resolve(...args), (...args) => this._reject(...args));
    } catch(e) {
      this._reject(e);
    }
  }

  _resolve(value) {
    // 只有在执行环境堆栈仅包含平台代码时才可被调用 
    process.nextTick(() => {
      if (this._status !== PENDING) {
        return;
      }
      this._status = FULFILLED;
      this._value = value;
      // 如果then的回调函数onFulfilled, onRejected为函数的话, 需要
      // 在 promise 执行结束前其不可被调用,当 promise 执行结束后其必须被调用
      // 其调用次数不可超过一次
      // 只有在执行环境堆栈仅包含平台代码时才可被调用 
      // process.nextTick(() => this._callThenCallbacks());
      this._callThenCallbacks();
    });
  }

  _reject(reason) {
    // 只有在执行环境堆栈仅包含平台代码时才可被调用 
    process.nextTick(() => {
      if (this._status !== PENDING) {
        return;
      }
      this._status = REJECTED;
      this._reason = reason;
      // 如果then的回调函数onFulfilled, onRejected为函数的话, 需要
      // 在 promise 执行结束前其不可被调用,当 promise 执行结束后其必须被调用
      // 其调用次数不可超过一次
      // 只有在执行环境堆栈仅包含平台代码时才可被调用 
      // process.nextTick(() => this._callThenCallbacks());
      this._callThenCallbacks();
    });
  }

  // 调用then回调函数队列
  _callThenCallbacks() {
    if (_.isEmpty(this._thenCallbacks)) {
      return;
    }
    this._thenCallbacks.forEach(([onFulfilled, onRejected, childResolve, childReject]) => {
      try {
        if (this._status === FULFILLED && !onFulfilled) {
          // 如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
          childResolve(this._value);
          return;
        }
        if (this._status === REJECTED && !onRejected) {
          // 如果 onRejected 不是函数且 promise1 拒绝执行, promise2 必须拒绝执行并返回相同的据因
          childReject(this._reason);
        }
        let x;
        if (this._status === REJECTED && onRejected) {
          // 当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调
          // 其第一个参数为 promise 的拒因
          // 必须被作为函数调用（即没有 this 值）
          x = onRejected(this._reason);
        } else if (this._status === FULFILLED && onFulfilled) {
          // 当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
          // 其第一个参数为 promise 的终值
          // 必须被作为函数调用（即没有 this 值）
          x = onFulfilled(this._value);
        }
        // 如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行下面的 Promise 解决过程
        this._resolvePromise(x, childResolve, childReject);
      } catch (error) {
        childReject(error);
      }
    });
  }

  // Promise 解决过程
  _resolvePromise(x, childResolve, childReject) {
    // x 与 promise 相等
    if (x === this) {
      // 如果 promise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 promise
      throw new TypeError("You cannot resolve a promise with itself");
    }
    // 如果 x 为 Promise ，则使 promise 接受 x 的状态
    if (x instanceof MyPromise) {
      // 如果 x 处于等待态
      console.log('======PENDING===', x._status);
      if (x._status === PENDING) {
        // promise 需保持为等待态直至 x 被执行或拒绝
        x.then(childResolve, childReject);
        return;
      }
      // 如果 x 处于执行态
      if (x._status === FULFILLED) {
        // 用相同的值执行 promise
        childResolve(x._value);
        return;
      }
      // 如果 x 处于执行态
      if (x._status === REJECTED) {
        // 用相同的值执行 promise
        childReject(x._reason);
        return;
      }
    }
    // x 为对象或函数
    if (_.isObject(x) || _.isFunction(x)) {
      // 把 x.then 赋值给 then
      let then;
      try {
        then = x.then;
      } catch (error) {
        // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
        // 其实这里不需要捕获, 因为最外层有捕获, 这里为了保持跟规范一致
        childReject(error);
        return;
      }
      // 如果 then 是函数
      if (_.isFunction(then)) {
        // 将 x 作为函数的作用域 this 调用之
        let called = false;
        try {
          then.call(x, (y) => {
            // 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次,
            // 则优先采用首次调用并忽略剩下的调用
            if (called) {
              return;
            }
            called = true;
  
            // 如果 resolvePromise 以值 y 为参数被调用
            this._resolvePromise(y, childResolve, childReject);
          }, (r) => {
            // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
            if (called) {
              return;
            }
            called = true;
  
            // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
            childReject(r);
          }); 
        } catch (error) {
          // 如果调用 then 方法抛出了异常 e

          // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
          if (called) {
            return;
          }

          // 否则以 e 为据因拒绝 promise
          childReject(error);
        }
        return;
      }
      // 如果 then 不是函数, 以 x 为参数执行 promise
      childResolve(x);
      return;
    }
    // 如果 x 不为对象或者函数, 以 x 为参数执行 promise
    childResolve(x);
  }

  then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是函数，其必须被忽略
    const _onFulfilled = _.isFunction(onFulfilled) ? onFulfilled : void 0;
    // 如果 onRejected 不是函数，其必须被忽略
    const _onRejected = _.isFunction(onRejected) ? onRejected : void 0;
    
    let childResolve;
    let childReject;
    const childPromise = new MyPromise((resolve, reject) => {
      childResolve = resolve;
      childReject = reject;
    });

    // then 方法可以被同一个 promise 调用多次
    this._thenCallbacks.push([_onFulfilled, _onRejected, childResolve, childReject]);

    return childPromise;
  }
}

module.exports = MyPromise;

手写一个promise

Promise 的状态

规范描述

代码实现

Then函数

规范描述

参数可选

`onFulfilled`特性

调用时机

调用要求

多次调用

返回

代码实现

Promise解决过程

规范描述

代码实现

全部代码

joyerli

引用和评论

谷歌翻译后导致react重渲染失效

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

手写一个promise

Promise 的状态

规范描述

代码实现

Then函数

规范描述

参数可选

onFulfilled特性

调用时机

调用要求

多次调用

返回

代码实现

Promise解决过程

规范描述

代码实现

全部代码

joyerli

引用和评论

谷歌翻译后导致react重渲染失效

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

`onFulfilled`特性