实现一个 A+规范的 Promise

[yyzclyang]

前言

在前端开发中，Promise 是一个特别重要的概念，很多的异步操作都依赖于 Promise。既然在日常中和它打过那么多的交道，那么我们来自己实现一个 Promise，加深对 Promise 的理解，增强自己的 JavaScript 功力。

本次在实现 Promise 的同时会使用 jest 编写测试用例，以保证实现过程的正确性。

如果想看测试框架的搭建或者完整实现的，可以点击我的github 仓库进行查看，如果你喜欢，欢迎 star，如果你发现我的错误，欢迎提出来。

A+规范

这是一份开放、健全且通用的 Promise 实现规范。由开发者制定，供开发者参考。

这里是官方规范，照着官方规范去实现，就可以写一个属于自己的、符合标准的 Promise。

实现

话不多说，我们来开始根据 A+ 规范实现 Promise。

规范的第一节是对一些术语的表达，并无实际功能无需实现。

1. 声明 Promise 类

Promise 是一个类（JavsScript 的类是用函数实现的，只是一个语法糖），它必须接受一个函数，否则报错；它还有一个 then 方法。

class PROMISE {
  constructor(executor) {
    if (typeof executor !== 'function') {
      throw new TypeError(`Promise resolver ${executor} is not a function`);
    }
  }
  then() {}
}

测试用例如下：

import Promise from '../';

describe('Promise', () => {
  test('是一个类', () => {
    expect(Promise).toBeInstanceOf(Function);
    expect(Promise.prototype).toBeInstanceOf(Object);
  });
  test('new Promise() 必须接受一个函数', () => {
    expect(() => {
      // @ts-ignore
      new Promise();
    }).toThrow(TypeError);
    expect(() => {
      // @ts-ignore
      new Promise('promise');
    }).toThrow(TypeError);
    expect(() => {
      // @ts-ignore
      new Promise(null);
    }).toThrow(TypeError);
  });
  test('new Promise(fn) 会生成一个对象，对象有 then 方法', () => {
    const promise = new Promise(() => {});
    expect(promise.then).toBeInstanceOf(Function);
  });
})

测试用例我后面不再列出来了，有兴趣的可以去我的 github 仓库查看。

2.状态维护

Promise 有三种状态：请求态（pending）、完成态（fulfilled）和拒绝态（rejected）。Promise 一开始是请求态，它可以转为另外两种状态（只允许改变一次），它会在状态改变的时候得到一个值。

class PROMISE {
  constructor(executor) {
    if (typeof executor !== 'function') {
      throw new TypeError(`Promise resolver ${executor} is not a function`);
    }
    // 初始状态
    this.status = 'pending';
    // 初始值
    this.value = null;
    // class 内部默认是严格模式，所以需要绑定 this
    executor(this.resolve.bind(this), this.reject.bind(this));
  }
  then() {}
  resolve(value) {
    // 状态保护
    if (this.status !== 'pending') {
      return;
    }
    // 改变状态， 赋值
    this.status = 'fulfilled';
    this.value = value;
  }
  reject(reason) {
    // 状态保护
    if (this.status !== 'pending') {
      return;
    }
    // 改变状态， 赋值
    this.status = 'rejected';
    this.value = reason;
  }
}

到这里，我们就差不多实现了规范 2.1。

3.then

then 可以接受两个函数，会在状态改变之后异步执行，根据规范 2.2.1，如果它们不是函数，就忽略。then 的异步本是一个微任务，这里用宏任务 setTimeout 就将代替一下（如果你想了解微任务、宏任务的知识，欢迎点这里查看我写的关于 Event Loop 的文章）。

then(onFulfilled, onRejected) {
  // 暂时将它们变成空函数，后面再做修改
  if (typeof onFulfilled !== 'function') {
    onFulfilled = () => {};
  }
  if (typeof onRejected !== 'function') {
    onRejected = () => {};
  }
  if (this.status === 'fulfilled') {
    // 异步执行，将就用 setTimeout 实现
    setTimeout(() => {
      onFulfilled(this.value);
    });
  }
  if (this.status === 'rejected') {
    setTimeout(() => {
      onRejected(this.value);
    });
  }
}

这里的情况是期待执行 then 函数时，Promise 的状态已经得到了改变。

如果 Promise 的执行函数是一个异步函数，执行 then 的时候，Promise 的状态还没得到改变，那么就需要把 then 接受的两个函数保存起来，等到 resolve 或 reject 的时候执行，这里也要异步执行。

then(onFulfilled, onRejected) {
  // 暂时将它们变成同步的空函数，后面再做修改
  if (typeof onFulfilled !== 'function') {
    onFulfilled = () => {};
  }
  if (typeof onRejected !== 'function') {
    onRejected = () => {};
  }
  // 如果执行 then 的时候，Promise 状态还未发生变化，就先将这两个函数存起来
  if (this.status === 'pending') {
    this.callbacks.push({
      onFulfilled: () => {
        setTimeout(() => {
          onFulfilled();
        });
      },
      onRejected: () => {
        setTimeout(() => {
          onRejected();
        });
      }
    });
  }
  if (this.status === 'fulfilled') {
    // 异步执行，将就用 setTimeout 实现
    setTimeout(() => {
      // 2.2.5
      onFulfilled.call(undefined, this.value);
    });
  }
  if (this.status === 'rejected') {
    setTimeout(() => {
      // 2.2.5
      onRejected.call(undefined, this.value);
    });
  }
}
resolve(value) {
  // 状态保护
  if (this.status !== 'pending') {
    return;
  }
  // 改变状态， 赋值
  this.status = 'fulfilled';
  this.value = value;
  // 如果回调函数数组中有值，说明之前执行过 then，需要调用 then 接受的函数
  this.callbacks.forEach((callback) => {
    // 2.2.5
    callback.onFulfilled.call(undefined, value);
  });
}
reject(reason) {
  // 状态保护
  if (this.status !== 'pending') {
    return;
  }
  // 改变状态， 赋值
  this.status = 'rejected';
  this.value = reason;
  // 如果回调函数数组中有值，说明之前执行过 then，需要调用 then 接受的函数
  this.callbacks.forEach((callback) => {
    // 2.2.5
    callback.onRejected.call(undefined, reason);
  });
}

这样一来，规范的 2.2.2 和 2.2.3 就都实现了。

而且由于 then 里面的 onFulfilled 和 onRejected 都是异步执行的，所以它也满足规范 2.2.4，它会在 Promise 的代码执行之后被调用。

根据规范 2.2.5， onFulfilled 和 onRejected 调用时也不存在 this ，所以用 .call 调用，指定 undefined 为 this。

规范 2.2.6，如果 then 执行之前 Promise 已经改变了状态，那么直接执行多个 then。否则将 then 的函数参数存在 callbacks 数组中，后面依次调用，实现规范 2.2.6。

4. 链式操作

Promise 有一个 then 方法，then 之后还可以 then，那么让 then 返回一个 Promise 即可，根据规范 2.2.7，我们也必须让 then 返回一个 Promise。

根据规范 2.2.7.1，无论是 onFulfilled 和 onrejected，它们返回的值都会被当做 then 返回的新的 Promise 的 resolve 的值成功处理。

根据规范 2.2.7.2，如果 onFulfilled 和 onRejected 抛出了一个错误 e，那么会被当做 then 返回的新的 Promise 的 reject 的值失败处理。

then(onFulfilled, onRejected) {
  // then 返回一个 Promise
  return new PROMISE((resolve, reject) => {
    // 暂时将它们变成空函数，后面再做修改
    if (typeof onFulfilled !== 'function') {
      onFulfilled = () => {};
    }
    if (typeof onRejected !== 'function') {
      onRejected = () => {};
    }
    // 如果执行 then 的时候，Promise 状态还未发生变化，就先将这两个函数存起来
    if (this.status === 'pending') {
      this.callbacks.push({
        // 这里也需要变了
        onFulfilled: () => {
            setTimeout(() => {
              try {
                // 2.2.5
                const result = onFulfilled.call(undefined, this.value);
                // onFulfilled 的返回值当做新的 Promise 的 resolve 的值被调用
                resolve(result);
              } catch (error) {
                // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
                reject(error);
              }
            });
          },
          onRejected: () => {
            setTimeout(() => {
              try {
                // 2.2.5
                const result = onRejected.call(undefined, this.value);
                // onRejected 的返回值当做新的 Promise 的 resolve 的值被调用
                resolve(result);
              } catch (error) {
                // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
                reject(error);
              }
            });
          }
      });
    }
    if (this.status === 'fulfilled') {
      // 异步执行，将就用 setTimeout 实现
      setTimeout(() => {
        try {
          // 2.2.5
          const result = onFulfilled.call(undefined, this.value);
          // onFulfilled 的返回值当做新的 Promise 的 resolve 的值被调用
          resolve(result);
        } catch (error) {
          // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
          reject(error);
        }
      });
    }
    if (this.status === 'rejected') {
      setTimeout(() => {
        try {
          // 2.2.5
          const result = onRejected.call(undefined, this.value);
          // onRejected 的返回值当做新的 Promise 的 resolve 的值被调用
          resolve(result);
        } catch (error) {
          // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
          reject(error);
        }
      });
    }
  });
}

规范 2.2.7.3 和 2.2.7.4 表示如果 then 的 onFulfilled 和 onRejected 不是函数，那么新的 Promise 会用上一个 Promise 成功（resolve）或失败（reject）的值继续成功或失败，也就是会继承上一个 Promise 的状态和值。

举一个例子

new Promise((resolve, reject) => {
  /**
   * 执行函数体
   */
})
  .then()
  .then(
    function A() {},
    function B() {}
  );

因为第一个 then 的参数不是函数，那么会发生穿透传递，所以后一个 then 接受的两个参数 function A 和 function B，会根据最前面那个 Promise 的状态和值来进行调用。

也就是上面的代码其实和下面的代码执行结果一样。

new Promise((resolve, reject) => {
  /**
   * 执行函数体
   */
})
  .then(
    function A() {},
    function B() {}
  );

好的，让我们来实现这个规范。

其实很简单，你上一个 Promise 如果是 resolve 时，那么我用 then 的 Promise 也 resolve，且值不变，如果是 reject，那么 then 的 Promise 也 reject，且值不变。

这里稍微一点点绕，希望你把这里仔细看，完全搞明白。

if (typeof onFulfilled !== 'function') {
  onFulfilled = (value) => {
    // 前面的 Promise 是 resolve 时，会调用 onFulfilled
    // 那么 then 的新 Promise 也 resolve
    // 将状态和值传递给 then 的 then
    resolve(value);
  };
}
if (typeof onRejected !== 'function') {
  onRejected = (reason) => {
    // 前面的 Promise 是 reject 时，会调用 onRejected
    // 那么 then 的新 Promise 也 reject
    // 将状态和值传递给 then 的 then
    reject(reason);
  };
}

其实这里可以简化一下，变成下面这种。

if (typeof onFulfilled !== 'function') {
  onFulfilled = resolve;
}
if (typeof onRejected !== 'function') {
  onRejected = reject;
}

这样，Promise 的链式操作就完成了。

5.实现 2.3.1

接下来我们继续看规范 2.3 的部分。

如果 Promise 和 resolve 或者 reject 调用的值是同一个，那么应该使 Promise 处于拒绝（reject ）态，值为 TypeError。

代码如下：

constructor(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError(`Promise resolver ${executor} is not a function`);
  }
  // 初始状态
  this.status = 'pending';
  // 初始值
  this.value = null;
  // 初始回调数组
  this.callbacks = [];
  // class 内部默认是严格模式，所以需要绑定 this
  try {
    executor(this.resolve.bind(this), this.reject.bind(this));
  } catch (error) {
    // 接住 resolve 和 reject 抛出的 TypeError，作为 reject 的值调用
    this.reject(error);
  }
}
/**
* 代码
*/
resolve(value) {
  // 状态保护
  if (this.status !== 'pending') {
    return;
  }
  // 如果 promise 和 resolve 调用的值是同一个，那么就抛出错误
  if (value === this) {
    throw new TypeError();
  }
  // 改变状态， 赋值
  this.status = 'fulfilled';
  this.value = value;
  // 如果回调函数数组中有值，说明之前执行过 then，需要调用 then 接受的函数
  this.callbacks.forEach((callback) => {
    callback.onFulfilled.call(undefined, value);
  });
}
reject(reason) {
  // 状态保护
  if (this.status !== 'pending') {
    return;
  }
  // 如果 promise 和 reject 调用的值是同一个，那么就抛出错误
  if (value === this) {
    throw new TypeError();
  }
  // 改变状态， 赋值
  this.status = 'rejected';
  this.value = reason;
  this.callbacks.forEach((callback) => {
    callback.onRejected.call(undefined, reason);
  });
}

6.实现 2.3.3

规范 2.3.2 是 2.3.3 情况的一个子集，我们直接实现 2.3.3 就可以了。

规范 2.3.3 说了那么多，其实就是在 resolve 和 reject 中添加下面几行代码。

if (value instanceof Object) {
  // 2.3.3.1 2.3.3.2
  const then = value.then;
  // 2.3.3.3
  if (typeof then === 'function') {
    return then.call(
      value,
      this.resolve.bind(this),
      this.reject.bind(this)
    );
  }
}

关于规范 2.3.3.2，我理解的是，并不是说 x.then 是一个异常，而是在取值的过程中发生了一个异常，代码表达如下：

// 不是这种
const X = {
  then: new Error()
}
// 是类似这种的情况
const x = {};
Object.defineProperty(x, 'then', {
  get: function() {
    throw new Error('y');
  }
});

new Promise((resolve, reject) => {
  resolve(x)
}).then((value) => {
  console.log('fulfilled', value)
}, (reason) => {
  console.log('rjected', reason)
})

由于取值 x.then 的过程中抛出了一个异常，被 constructor 中的 try catch 捕捉到了，执行 reject，这里就无需做处理了。

规范 2.3.4 不用特殊实现，说的就是正常情况。

7.完整实现

到这里就把 A+ 规范走了一遍，实现的 Promise 如下：

class PROMISE {
  constructor(executor) {
    if (typeof executor !== 'function') {
      throw new TypeError(`Promise resolver ${executor} is not a function`);
    }
    // 初始状态
    this.status = 'pending';
    // 初始值
    this.value = null;
    // 初始回调数组
    this.callbacks = [];
    // class 内部默认是严格模式，所以需要绑定 this
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      // 接住 resolve 和 reject 抛出的 TypeError，作为 reject 的值调用
      this.reject(error);
    }
  }
  then(onFulfilled, onRejected) {
    // then 返回一个 Promise
    return new PROMISE((resolve, reject) => {
      // then 的穿透传递
      if (typeof onFulfilled !== 'function') {
        onFulfilled = resolve;
      }
      if (typeof onRejected !== 'function') {
        onRejected = reject;
      }
      // 如果执行 then 的时候，Promise 状态还未发生变化，就先将这两个函数存起来
      if (this.status === 'pending') {
        this.callbacks.push({
          onFulfilled: () => {
            setTimeout(() => {
              try {
                const result = onFulfilled.call(undefined, this.value);
                // onFulfilled 的返回值当做新的 Promise 的 resolve 的值被调用
                resolve(result);
              } catch (error) {
                // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
                reject(error);
              }
            });
          },
          onRejected: () => {
            setTimeout(() => {
              try {
                const result = onRejected.call(undefined, this.value);
                // onRejected 的返回值当做新的 Promise 的 resolve 的值被调用
                resolve(result);
              } catch (error) {
                // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
                reject(error);
              }
            });
          }
        });
      }
      if (this.status === 'fulfilled') {
        // 异步执行，将就用 setTimeout 实现
        setTimeout(() => {
          try {
            const result = onFulfilled.call(undefined, this.value);
            // onFulfilled 的返回值当做新的 Promise 的 resolve 的值被调用
            resolve(result);
          } catch (error) {
            // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
            reject(error);
          }
        });
      }
      if (this.status === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected.call(undefined, this.value);
            // onRejected 的返回值当做新的 Promise 的 resolve 的值被调用
            resolve(result);
          } catch (error) {
            // 如果抛出了错误，那么当做新的 Promise 的 reject 的值被调用
            reject(error);
          }
        });
      }
    });
  }
  resolve(value) {
    // 状态保护
    if (this.status !== 'pending') {
      return;
    }
    // 如果 promise 和 resolve 调用的值是同一个，那么就抛出错误
    if (value === this) {
      throw new TypeError('Chaining cycle detected for promise');
    }
    if (value instanceof Object) {
      // 2.3.3.1
      const then = value.then;
      // 2.3.3.3
      if (typeof then === 'function') {
        return then.call(
          value,
          this.resolve.bind(this),
          this.reject.bind(this)
        );
      }
    }
    // 改变状态， 赋值
    this.status = 'fulfilled';
    this.value = value;
    // 如果回调函数数组中有值，说明之前执行过 then，需要调用 then 接受的函数
    this.callbacks.forEach((callback) => {
      callback.onFulfilled.call(undefined, value);
    });
  }
  reject(reason) {
    // 状态保护
    if (this.status !== 'pending') {
      return;
    }
    // 如果 promise 和 reject 调用的值是同一个，那么就抛出错误
    if (reason === this) {
      throw new TypeError('Chaining cycle detected for promise');
    }
    if (reason instanceof Object) {
      // 2.3.3.1
      const then = reason.then;
      // 2.3.3.3
      if (typeof then === 'function') {
        return then.call(
          reason,
          this.resolve.bind(this),
          this.reject.bind(this)
        );
      }
    }
    // 改变状态， 赋值
    this.status = 'rejected';
    this.value = reason;
    this.callbacks.forEach((callback) => {
      callback.onRejected.call(undefined, reason);
    });
  }
}

其中重复的代码我在这里就不抽离出来了，这样方便阅读。

8.静态方法

像 resolve 、reject 、all 、race这几个静态方法其实不属于 A+ 规范中，我这里也顺带实现一下。

resolve 和 reject 类似，接受一个值，返回一个 Promise。如果接受的值是一个 Promise，那么就继承该 Promise 的状态和值。

static resolve(value) {
  return new PROMISE((resolve, reject) => {
    if (value instanceof PROMISE) {
      value.then(resolve, reject);
    } else {
      resolve(value);
    }
  });
}
static reject(reason) {
  return new PROMISE((resolve, reject) => {
    if (reason instanceof PROMISE) {
      reason.then(resolve, reject);
    } else {
      reject(reason);
    }
  });
}

all 是接受一个 Promise 数组，返回一个 Promise。

这里定义一个 results 数组，然后遍历 Promise 数组，每 resolve 一个 Promise ，就像 results 加入一个 resolve 的值，如果results 的长度与 Promise 数组的长度相同，那么说明全部的 Promise 都 resolve 了，那么 all 返回的 Promise 就 resolve 这个数组。

另外，只要 Promise 数组中有一个 Promise 转为了 reject，那么 all 返回的 Promise 也 reject掉。

static all(promiseArray) {
  return new PROMISE((resolve, reject) => {
    const results = [];
    promiseArray.forEach((promise) => {
      promise.then((value) => {
        results.push(value);
        if (results.length === promiseArray.length) {
          resolve(results);
        }
      }, reject);
    });
  });
}

race 也是接受一个 Promise 数组，返回一个 Promise。

只有 Promise 数组中有一个 Promise resolve 或者 reject 了，那么 race 返回的 Promise 也 resolve 或者 reject。

static race(promiseArray) {
  return new PROMISE((resolve, reject) => {
    promiseArray.forEach((promise) => {
      promise.then(resolve, reject);
    });
  });
}

感想

从头实现一遍 Promise 的 A+ 规范的过程中，对 Promise 的一些细枝细节都梳理了一遍，一些之前根本没有注意到的地方也给暴露出来了，特别是 x 如果是一个有 then 方法的对象，那么 x 会被包装成一个 Promise，这个地方也是之前没有接触到的。

这个过程我用 TypeScript 实现了一遍，具体代码点这里，其中也包括了我写的测试用例，如果你喜欢，欢迎 star。

如果你发现我实现过程有不对的地方，欢迎与我探讨。