Promise/A+实现：深入理解JavaScript异步编程

2023-12-21 21:16:33

在当今快节奏的网络世界中，异步编程已成为实现响应式和高性能应用程序的基石。其中，Promise/A+规范作为一种行业标准，为JavaScript异步编程提供了统一且可靠的解决方案。本文将带领您深入Promise/A+规范的奥秘，并指导您实现自己的Promise实现，从而加深您对异步编程的理解。

揭开Promise/A+的面纱

Promise/A+规范定义了一个易于使用的接口，用于处理异步操作和管理异步代码的执行顺序。其核心概念是创建一个"Promise"对象，该对象代表一个最终将解析或拒绝的异步操作。

Promise的三个状态：

待定：初始状态，表示异步操作仍在进行中。
已解析：异步操作已成功完成。
已拒绝：异步操作已失败。

解析和拒绝方法：

当异步操作完成时，可以使用resolve()或reject()方法将Promise的状态从"待定"更改为"已解析"或"已拒绝"。

实现您的第一个Promise

了解了Promise/A+规范的基本原理后，让我们动手实现自己的Promise。

class Promise {
  constructor(executor) {
    this.state = "pending"; // 初始状态
    this.result = undefined; // 最终结果
    this.onResolveCallbacks = []; // 待解析回调队列
    this.onRejectCallbacks = []; // 待拒绝回调队列

    // 执行器函数，立即执行
    executor(
      // 解析回调
      (value) => this.resolve(value),
      // 拒绝回调
      (error) => this.reject(error)
    );
  }

  resolve(value) {
    // 仅在待定状态才可解析
    if (this.state !== "pending") return;

    this.state = "fulfilled";
    this.result = value;
    this.onResolveCallbacks.forEach((callback) => callback(value));
  }

  reject(error) {
    // 仅在待定状态才可拒绝
    if (this.state !== "pending") return;

    this.state = "rejected";
    this.result = error;
    this.onRejectCallbacks.forEach((callback) => callback(error));
  }

  then(onFulfilled, onRejected) {
    // 如果未提供回调，则忽略
    if (typeof onFulfilled !== "function") onFulfilled = (value) => value;
    if (typeof onRejected !== "function") onRejected = (error) => error;

    // 返回一个新的Promise，表示then后的异步操作
    return new Promise((resolve, reject) => {
      // 将回调添加到队列中，稍后执行
      this.onResolveCallbacks.push(() => {
        try {
          const result = onFulfilled(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });

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

  catch(onRejected) {
    // 快捷方式，仅在拒绝时调用
    return this.then(undefined, onRejected);
  }

  finally(onFinally) {
    // 无论解析还是拒绝，都执行回调
    return this.then(
      (value) => {
        onFinally();
        return value;
      },
      (error) => {
        onFinally();
        throw error;
      }
    );
  }
}