读懂Promises/A+规范，轻松实现一个Promise

2023-11-24 10:07:48

现代JavaScript开发中，我们经常需要处理异步操作。在早期，我们通常使用回调函数来处理异步操作。然而，回调函数很容易导致代码嵌套，产生难以阅读和维护的“回调地狱”。为了解决这个问题，JavaScript引入了Promise对象。

Promise对象是一种用于处理异步操作的规范。它提供了一种更优雅、更易于阅读和维护的方式来处理异步操作。Promises/A+规范定义了Promise对象的基本行为，包括创建Promise对象、解析Promise对象、拒绝Promise对象以及处理Promise对象的状态。

在本文中，我们将一起读懂Promises/A+规范。并且依据规范编写一个能通过promises-aplus-tests提供的872个测试用例的Promise对象。相信读完这篇文章的你会感觉到实现Promise是如此简单！

Promises/A+规范

Promises/A+规范定义了Promise对象的基本行为，包括创建Promise对象、解析Promise对象、拒绝Promise对象以及处理Promise对象的状态。

创建Promise对象

var promise = new Promise(function(resolve, reject) {
  // 异步操作
});

Promise对象可以通过new Promise()构造函数来创建。构造函数接受一个函数作为参数，该函数称为“执行器函数”。执行器函数的第一个参数是resolve函数，第二个参数是reject函数。resolve函数用于解析Promise对象，reject函数用于拒绝Promise对象。

解析Promise对象

promise.resolve(value);

当异步操作成功时，可以使用resolve函数来解析Promise对象。resolve函数接受一个参数，该参数是要传递给Promise对象的成功值。

拒绝Promise对象

promise.reject(reason);

当异步操作失败时，可以使用reject函数来拒绝Promise对象。reject函数接受一个参数，该参数是要传递给Promise对象的失败原因。

处理Promise对象的状态

Promise对象的状态可以是pending、fulfilled或rejected。pending状态表示Promise对象尚未完成。fulfilled状态表示Promise对象已经完成并且成功。rejected状态表示Promise对象已经完成并且失败。

promise.then(function(value) {
  // 成功的回调函数
}, function(reason) {
  // 失败的回调函数
});

我们可以使用then方法来处理Promise对象的状态。then方法接受两个函数作为参数，第一个函数是成功的回调函数，第二个函数是失败的回调函数。当Promise对象的状态变为fulfilled时，则调用成功的回调函数。当Promise对象的状态变为rejected时，则调用失败的回调函数。

实现Promise对象

现在我们已经了解了Promises/A+规范，接下来我们将依据规范编写一个能通过promises-aplus-tests提供的872个测试用例的Promise对象。

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

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

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

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

  then(onFulfilled, onRejected) {
    var promise = new Promise(() => {});

    this.onFulfilledCallbacks.push(() => {
      setTimeout(() => {
        try {
          var result = onFulfilled(this.value);
          resolvePromise(promise, result);
        } catch (error) {
          rejectPromise(promise, error);
        }
      });
    });

    this.onRejectedCallbacks.push(() => {
      setTimeout(() => {
        try {
          var result = onRejected(this.reason);
          resolvePromise(promise, result);
        } catch (error) {
          rejectPromise(promise, error);
        }
      });
    });

    return promise;
  }
}

function resolvePromise(promise, result) {
  if (result instanceof Promise) {
    result.then(
      (value) => { resolvePromise(promise, value); },
      (reason) => { rejectPromise(promise, reason); }
    );
  } else {
    promise.resolve(result);
  }
}

function rejectPromise(promise, reason) {
  promise.reject(reason);
}

我们首先定义了一个Promise类。Promise类的构造函数接受一个执行器函数作为参数。执行器函数的第一个参数是resolve函数，第二个参数是reject函数。resolve函数用于解析Promise对象，reject函数用于拒绝Promise对象。

然后，我们定义了then方法。then方法接受两个函数作为参数，第一个函数是成功的回调函数，第二个函数是失败的回调函数。当Promise对象的状态变为fulfilled时，则调用成功的回调函数。当Promise对象的状态变为rejected时，则调用失败的回调函数。

最后，我们定义了resolvePromise和rejectPromise函数。这两个函数用于处理Promise对象的状态。当Promise对象的状态变为fulfilled时，resolvePromise函数将Promise对象的值传递给成功的回调函数。当Promise对象的状态变为rejected时，rejectPromise函数将Promise对象的原因传递给失败的回调函数。