手撸Promise/A+规范，深入理解Promise

前端

2023-10-27 16:14:13

何为Promise？

Promise是一种用于处理异步操作的JavaScript对象。它提供了诸如.then()和.catch()等方法，允许您将异步操作连接起来，并对结果进行处理。

Promise/A+规范

Promise/A+规范是Promise对象的标准规范，定义了Promise对象的行为和用法。这个规范由JavaScript社区制定，旨在确保不同实现的Promise对象具有相同的行为和功能。

实现Promise/A+规范

您可以使用ES6的class来实现Promise/A+规范。具体步骤如下：

定义Promise类

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

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this.onFulfilledCallbacks.push(() => {
        try {
          const result = onFulfilled(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });

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

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

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

    this.state = 'fulfilled';
    this.value = value;

    this.onFulfilledCallbacks.forEach(callback => callback());
  }

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

    this.state = 'rejected';
    this.reason = reason;

    this.onRejectedCallbacks.forEach(callback => callback());
  }
}

实现then方法

.then()方法用于将异步操作连接起来。它接收两个参数，onFulfilled和onRejected。当Promise对象的状态变为fulfilled时，onFulfilled回调函数将被调用，当Promise对象的状态变为rejected时，onRejected回调函数将被调用。