手写 Promise：拨开迷雾，深入浅出剖析 Promise 运行机制

2023-10-03 14:17:34

在编程的世界里，"Promise" 是一种强大的工具，它允许我们处理异步操作，使我们的代码更具可读性和可维护性。如果你想深入了解 Promise 的内部运作原理，那么这篇文章将带你踏上一次激动人心的探索之旅。

在这个以"手写 Promise"为主题的深入探讨中，我们将从头开始构建一个简化的 Promise 实现，逐一揭开 Promise 的神秘面纱。通过循序渐进的代码示例和通俗易懂的讲解，我们将直面 Promise 的底层机制，了解它如何处理异步操作、管理状态以及实现链式调用。

当然，我们不会止步于理论层面的探讨。我们将通过编写测试用例来验证我们的 Promise 实现，确保它符合 Promise/A+ 规范，从而保证代码的可靠性和健壮性。

准备好迎接一场关于 Promise 的知识盛宴了吗？让我们一起踏上这段发现之旅，拨开迷雾，深入浅出地剖析 Promise 的运行机制。

Promise 的诞生：一个关于异步处理的故事

在异步编程的世界里，JavaScript 的回调函数机制曾一度叱咤风云。然而，随着代码复杂度的不断提升，回调函数的嵌套和混乱程度也与日俱增，给代码的可读性和可维护性带来了严峻挑战。

就在此时，Promise 应运而生。它为我们提供了一种更加优雅、更加结构化的方式来处理异步操作。有了 Promise，我们再也不用在回调函数的汪洋中苦苦挣扎，而是可以将注意力集中在业务逻辑上，让 Promise 默默地处理繁琐的异步细节。

Promise 的本质：一个状态管理者

从本质上讲，Promise 是一种状态管理者。它可以处于三种不同的状态：

Pending（待定）： Promise 刚被创建，尚未完成或失败。
Fulfilled（已完成）： Promise 已成功完成，并且有一个结果值。
Rejected（已失败）： Promise 已失败，并有一个错误值。

Promise 一旦进入 Fulfilled 或 Rejected 状态，就不可再改变。这种状态管理机制确保了异步操作的可靠性和可预测性。

Promise 的创建：用 new 开启异步之旅

创建 Promise 的起点是 new Promise()。这个构造函数接受一个函数作为参数，该函数称为 executor。executor 函数有两个参数：resolve 和 reject。

resolve 函数用于将 Promise 标记为已完成，并提供一个结果值。reject 函数用于将 Promise 标记为已失败，并提供一个错误值。

Promise 的使用：then() 方法的链式调用

Promise 的强大之处在于它的 then() 方法。then() 方法接受两个参数：onFulfilled 和 onRejected。当 Promise 完成时，会调用 onFulfilled 函数，并将结果值作为参数传递。当 Promise 失败时，会调用 onRejected 函数，并将错误值作为参数传递。

then() 方法的链式调用功能是 Promise 的一大亮点。它允许我们在一个 Promise 完成后立即启动另一个 Promise，从而创建异步操作的流水线。

手写 Promise 的实现：从零开始构建

现在，让我们动手构建一个简化的 Promise 实现。我们将一步一步地分解代码，深入理解 Promise 的工作原理。

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

    const resolve = (value) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.result = value;
      this.onFulfilledCallbacks.forEach((callback) => callback(value));
    };

    const reject = (error) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach((callback) => callback(error));
    };

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

  then(onFulfilled, onRejected) {
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    } else if (this.state === 'fulfilled') {
      onFulfilled(this.result);
    } else if (this.state === 'rejected') {
      onRejected(this.result);
    }
    return this;
  }
}

在这个 Promise 实现中，我们维护了 Promise 的状态、结果值以及已完成和已失败时的回调队列。executor 函数会在 Promise 构造函数中立即执行，并负责将 Promise 标记为已完成或已失败。then() 方法负责管理回调队列，并在 Promise 完成或失败时调用相应的回调函数。

测试用例：验证我们的 Promise 实现

为了确保我们的 Promise 实现符合 Promise/A+ 规范，我们编写了以下测试用例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise
  .then((result) => {
    console.assert(result === '成功');
  })
  .catch((error) => {
    console.error(error);
  });