基于 PromiseA+ 规范从头剖析 Promise 实现，揭秘面试难题！

2023-12-06 09:53:35

作为一名经验丰富的技术博主，我始终致力于以独特的视角审视技术世界，用充满激情的文字和精准的表达为读者呈现独一无二的见解。今天，让我们踏上一个充满挑战的旅程，从零开始实现 Promise，并深入剖析它在面试中的重要性。

当我们面对那些令人困惑的 Promise 面试题时，最好的办法就是回归基础，从 Promise 的底层实现原理入手。就像一位探险家，我们将一步一步探索 Promise 的内部结构，揭开它的奥秘。

PromiseA+ 规范：坚实的地基

PromiseA+ 规范是 Promise 的基石，为其提供了统一的标准。它定义了 Promise 的行为和交互方式，确保了不同实现之间的兼容性。在构建 Promise 之前，我们必须熟知 PromiseA+ 规范，因为它将指导我们的每一步。

从头构建 Promise：一个循序渐进的过程

1. 构建 Promise 构造函数

Promise 构造函数是 Promise 的入口点。它接收一个函数参数，该函数称为执行器函数。执行器函数有两个参数：resolve 和 reject。resolve 用来表示 Promise 已成功完成，而 reject 则表示 Promise 已失败。

function Promise(executor) {
  // Promise 状态
  this.state = 'pending';
  // Promise 结果
  this.value = undefined;
  // Promise 成功的回调函数队列
  this.onFulfilledCallbacks = [];
  // Promise 失败的回调函数队列
  this.onRejectedCallbacks = [];

  // 执行器函数
  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

2. 实现 then 方法

then 方法是 Promise 的核心功能之一。它允许我们对 Promise 的最终状态（成功或失败）进行异步处理。then 方法接收两个参数：onFulfilled 和 onRejected，它们是 Promise 成功的回调函数和失败的回调函数。

Promise.prototype.then = function(onFulfilled, onRejected) {
  // 如果 onFulfilled 不是函数，则直接返回 Promise 的值
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  // 如果 onRejected 不是函数，则直接抛出 Promise 的错误
  onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };

  // 创建一个新的 Promise，作为 then 方法的返回值
  const newPromise = new Promise();

  // 如果 Promise 处于 pending 状态，则将 onFulfilled 和 onRejected 添加到相应的回调队列中
  if (this.state === 'pending') {
    this.onFulfilledCallbacks.push(onFulfilled);
    this.onRejectedCallbacks.push(onRejected);
  } else if (this.state === 'fulfilled') {
    // 如果 Promise 已经成功，则立即执行 onFulfilled
    setTimeout(() => {
      onFulfilled(this.value);
    }, 0);
  } else if (this.state === 'rejected') {
    // 如果 Promise 已经失败，则立即执行 onRejected
    setTimeout(() => {
      onRejected(this.value);
    }, 0);
  }

  // 返回新的 Promise
  return newPromise;
};

3. 实现 resolve 和 reject 方法

resolve 和 reject 方法是执行器函数调用的方法，它们用于设置 Promise 的状态和值。

Promise.prototype.resolve = function(value) {
  if (this.state !== 'pending') return;

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

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

Promise.prototype.reject = function(error) {
  if (this.state !== 'pending') return;

  this.state = 'rejected';
  this.value = error;

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