面试官：请手写一个Promise——从原理到实现的全解析

在前端开发中，Promise已成为处理异步操作的标准方案。当面试官抛出”请手写一个Promise”的问题时，其考察的不仅是API的记忆，更是对异步编程原理、状态管理、链式调用等核心机制的理解。本文将从零开始实现一个符合Promise/A+规范的类，并解析其设计哲学。

一、Promise的核心机制解析

Promise的本质是一个状态机，包含三种状态：pending（初始）、fulfilled（成功）、rejected（失败）。状态一旦改变便不可逆，这是保证异步操作可靠性的基础。其核心流程可概括为：

1. 状态迁移：通过resolve和reject函数触发状态变更
2. 回调队列：维护成功/失败回调数组，支持多回调注册
3. 链式调用：通过then方法返回新Promise实现链式操作
4. 错误冒泡：未捕获的异常会沿链向下传递

二、手写Promise的实现步骤

1. 构造函数与状态管理

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);
    }
  }
}

关键点：

• 状态变更前需检查当前状态，防止重复修改
• 异常处理需在executor执行时捕获
• 回调队列采用数组存储，支持批量执行

2. then方法的实现

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;
}

实现要点：

• 采用异步执行回调（通过setTimeout实现微任务效果）
• 返回新Promise实现链式调用
• 处理回调函数非函数的情况
• 错误需在try-catch中捕获

3. resolvePromise核心算法

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);
  }
}

算法解析：

1. 处理x为Promise的情况（thenable对象）
2. 防止then方法执行时的循环引用
3. 使用called标志避免重复调用
4. 对x进行类型判断，支持thenable对象

三、Promise的扩展方法实现

1. catch方法实现

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

2. finally方法实现

finally(callback) {
  return this.then(
    value => MyPromise.resolve(callback()).then(() => value),
    reason => MyPromise.resolve(callback()).then(() => { throw reason; })
  );
}

3. 静态方法实现

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

四、实际应用中的优化策略

1. 性能优化：

   • 使用对象池管理Promise实例
   • 对频繁创建的Promise进行缓存
   • 避免在热路径中创建大量Promise

2. 错误处理：

   • 实现全局未捕获异常处理
   • 使用Promise.try封装同步/异步错误
   • 建立错误分类处理机制

3. 调试技巧：

   • 实现自定义的Promise.debug方法
   • 使用长堆栈追踪库
   • 建立Promise链可视化工具

五、常见面试问题解析

1. 为什么Promise要使用微任务而非宏任务？

   • 微任务优先级高于宏任务，能更快响应用户操作
   • 避免UI渲染阻塞
   • 符合事件循环的预期行为

2. 如何实现Promise的并行执行？

   • 使用Promise.all实现全部完成
   • 使用Promise.race实现竞速完成
   • 自定义实现部分完成逻辑

3. Promise与async/await的关系？

   • async/await是语法糖，底层仍依赖Promise
   • 提高了异步代码的可读性
   • 错误处理方式不同（try-catch vs .catch）

六、完整实现代码

class MyPromise {
  // ... 前文所有代码 ...
}
// 测试用例
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('成功'), 1000);
});
promise
  .then(res => {
    console.log(res);
    return new MyPromise(resolve => resolve('链式调用'));
  })
  .then(res => console.log(res))
  .catch(err => console.error(err));

七、总结与建议

手写Promise的实现不仅考察对异步编程的理解，更要求掌握状态管理、错误处理、链式调用等核心机制。在实际开发中，建议：

1. 优先使用原生Promise或经过充分测试的库（如bluebird）
2. 对复杂异步流程建立可视化监控
3. 实现统一的错误处理中间件
4. 定期进行Promise链的代码审查

通过深入理解Promise的实现原理，开发者能够写出更健壮、更高效的异步代码，在面试中也能展现出对JavaScript核心机制的深刻理解。