前端面试必知：手写Promise实现详解

在前端开发领域，Promise作为异步编程的核心解决方案，已成为面试中的高频考点。手写Promise实现不仅能考察开发者对JavaScript事件循环、闭包等基础知识的理解，更能体现其对异步编程范式的深入掌握。本文将从Promise的规范要求出发，逐步拆解实现细节，帮助读者构建完整的Promise知识体系。

一、Promise核心规范解析

根据ES6规范，Promise对象必须满足三个核心状态：pending（初始状态）、fulfilled（成功状态）和rejected（失败状态）。状态变更具有不可逆性，一旦从pending转为fulfilled或rejected，将永久保持该状态。这种设计确保了异步操作的确定性，避免了竞态条件。

1.1 构造函数与执行器

Promise构造函数接收一个executor函数作为参数，该函数立即执行并接收resolve和reject两个回调。这种设计实现了异步操作的立即启动，同时将结果处理延迟到未来某个时刻。

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态
    this.value = undefined; // 成功值
    this.reason = undefined; // 失败原因
    this.onFulfilledCallbacks = []; // 成功回调队列
    this.onRejectedCallbacks = []; // 失败回调队列
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

1.2 状态变更的原子性

状态变更必须保证原子性操作，即只有在pending状态下才能进行状态转换。这种设计避免了重复调用resolve或reject导致的状态混乱。通过闭包保存state、value和reason，实现了数据的私有化保护。

二、then方法实现与链式调用

then方法是Promise的核心接口，它接收两个可选参数：onFulfilled和onRejected。规范要求then方法必须返回一个新的Promise，从而实现链式调用。

2.1 基本实现结构

then(onFulfilled, onRejected) {
  // 参数兼容性处理
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  const promise2 = new MyPromise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          const x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
  });
  return promise2;
}

2.2 异步调度机制

使用setTimeout将回调执行推入宏任务队列，确保当前同步代码执行完毕后再处理异步结果。这种设计符合Promise/A+规范对异步性的要求，避免了同步调用可能导致的执行顺序问题。

2.3 返回值处理规范

resolvePromise函数是处理then方法返回值的核心逻辑，它需要处理三种情况：

1. 返回值是普通值：直接resolve
2. 返回值是Promise对象：等待其状态变更
3. 返回值是thenable对象：调用其then方法

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  let called = false;
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      const then = x.then;
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}

三、静态方法实现

Promise规范定义了三个静态方法：resolve、reject和all/race等集合方法。这些方法的实现进一步检验开发者对Promise特性的理解。

3.1 Promise.resolve实现

static resolve(value) {
  if (value instanceof MyPromise) {
    return value;
  }
  return new MyPromise(resolve => resolve(value));
}

3.2 Promise.all实现

static all(promises) {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let count = 0;
    if (promises.length === 0) {
      resolve(results);
      return;
    }
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise).then(
        value => {
          results[index] = value;
          count++;
          if (count === promises.length) {
            resolve(results);
          }
        },
        reason => reject(reason)
      );
    });
  });
}

四、面试常见问题解析

4.1 为什么需要微任务调度？

实际实现中，许多库使用MutationObserver或process.nextTick实现微任务调度，以获得比宏任务更高的优先级。这在需要精确控制执行顺序的场景中尤为重要。

4.2 错误处理最佳实践

在executor函数和then回调中，必须使用try-catch捕获同步错误。对于异步错误，应通过reject回调传递，确保错误能够沿链式调用传播。

4.3 性能优化方向

1. 使用对象池管理Promise实例
2. 避免不必要的状态检查
3. 对已决议的Promise进行缓存

五、实战建议

1. 逐步实现：先实现基本状态管理，再完善then方法，最后添加静态方法
2. 测试驱动：编写测试用例验证各种边界情况
3. 对比学习：参考知名库如bluebird的实现，理解优化策略
4. 规范验证：使用promises-aplus-tests进行合规性测试

手写Promise实现是对JavaScript异步编程的深度考察。通过掌握其核心机制，开发者不仅能轻松应对面试问题，更能在实际项目中编写出更健壮、高效的异步代码。建议读者在实现过程中，重点关注状态管理的不可变性、链式调用的返回值处理以及错误传播机制这三个关键点。