剖析 PromiseA+ 规范，手把手教你编写符合规范的源码（上）

2023-09-11 08:45:17

如何编写符合 PromiseA+ 规范的源码（上）

1. PromiseA+ 规范简介

PromiseA+ 是 JavaScript 语言中异步编程的标准规范，它定义了 Promise 对象的行为和交互方式，以确保不同 Promise 库之间的一致性和互操作性。PromiseA+ 规范由若干个测试用例组成，这些测试用例涵盖了 Promise 的各种行为，包括创建、解析、拒绝、链式调用、异常处理等。

2. PromiseA+ 规范的基本概念

2.1 Promise 对象

Promise 对象表示一个异步操作的结果，它可以处于三种状态之一：

Pending： 初始状态，表示异步操作尚未完成。
Fulfilled： 成功状态，表示异步操作已成功完成。
Rejected： 失败状态，表示异步操作已失败。

2.2 Promise 的构造函数

Promise 对象可以通过 new Promise() 构造函数创建，构造函数的参数是一个 executor 函数，该函数接收两个参数：resolve 和 reject，这两个参数都是函数。executor 函数的作用是执行异步操作，并在异步操作完成后调用 resolve 或 reject 函数来将 Promise 对象的状态变为 Fulfilled 或 Rejected。

2.3 Promise 的链式调用

Promise 对象支持链式调用，即一个 Promise 对象的 then 方法可以返回另一个 Promise 对象。这使得我们可以将多个异步操作串联起来，并在每个异步操作完成后执行相应的回调函数。

2.4 Promise 的异常处理

如果在 Promise 对象的 executor 函数或 then 方法中抛出异常，则该 Promise 对象的状态将变为 Rejected，并且异常信息将作为拒绝原因传递给下一个 then 方法。

3. PromiseA+ 规范实现示例

接下来，我们提供一个简单的 PromiseA+ 规范实现示例，帮助你更好地理解 PromiseA+ 规范的基本概念和原理。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') {
        return;
      }

      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach((callback) => {
        callback(value);
      });
    };

    const reject = (reason) => {
      if (this.state !== 'pending') {
        return;
      }

      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach((callback) => {
        callback(reason);
      });
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }
}