手写Promise全攻略：从零到一征服面试官！

一、为什么面试官总爱问手写Promise？

在前端开发领域，Promise已成为处理异步操作的标准方案。面试官之所以频繁考察手写实现，主要有三大动机：

1. 基础扎实度检验：手写Promise能暴露开发者对闭包、原型链、事件循环等核心概念的理解深度。例如，实现.then()的链式调用需要深入掌握回调队列管理。
2. 问题解决能力评估：在无现成库的情况下，能否从零构建稳定异步方案，直接反映开发者的工程思维。某大厂面试题曾要求候选人现场修复一个存在内存泄漏的Promise实现。
3. 源码级理解需求：主流框架（如Vue3的响应式系统）底层大量使用Promise变体，理解其原理有助于快速定位复杂问题。

典型失败案例：某候选人能熟练背诵Promise/A+规范，但在实现allSettled时错误地使用了Promise.race的逻辑，导致功能异常。这警示我们：机械记忆规范条文远不如理解实现本质。

二、手写Promise的五大核心模块

1. 基础构造函数实现

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // pending/fulfilled/rejected
    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);
    }
  }
}

关键点：

• 状态机设计：必须严格限制状态单向变更（pending→fulfilled/rejected）
• 异步回调队列：解决then方法调用时Promise尚未决议的问题
• 错误捕获：executor执行异常需自动触发reject

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

实现要点：

• 返回值穿透：当onFulfilled/onRejected未返回Promise时，需自动包装
• 异步调度：使用setTimeout模拟微任务队列（实际实现需区分宏任务/微任务）
• 错误边界：每个处理函数都需独立try-catch

3. resolvePromise解析函数

function resolvePromise(promise2, x, resolve, reject) {
  // 防止循环引用
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected'));
  }
  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);
  }
}

核心逻辑：

• 类型判断：处理x为Promise/thenable对象/普通值的情况
• 状态锁定：防止多次调用resolve/reject
• 递归解析：当返回值是Promise时需持续解析

4. 静态方法实现（all/race/allSettled）

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

实现技巧：

• 空数组处理：all([])应立即resolve
• 索引保持：all方法需按输入顺序存储结果
• 类型安全：使用MyPromise.resolve统一处理输入

三、面试高频变种题解析

1. 实现带取消功能的Promise

class CancelablePromise {
  constructor(executor) {
    this.promise = new Promise((resolve, reject) => {
      this.resolve = resolve;
      this.reject = reject;
      executor(resolve, reject);
    });
    this.cancel = () => {
      this.reject(new Error('Promise canceled'));
    };
  }
}
// 使用示例
const cp = new CancelablePromise((resolve) => {
  setTimeout(() => resolve('done'), 1000);
});
cp.cancel(); // 立即触发reject

应用场景：请求超时控制、用户操作中断处理

2. 实现Promise.retry

Promise.retry = (fn, retries = 3, delay = 1000) => {
  return new Promise((resolve, reject) => {
    const attempt = () => {
      fn()
        .then(resolve)
        .catch((err) => {
          if (retries-- <= 0) {
            reject(err);
          } else {
            setTimeout(attempt, delay);
          }
        });
    };
    attempt();
  });
};

实现要点：

• 递归调用控制
• 指数退避策略（可扩展）
• 剩余次数管理

四、实战建议与避坑指南

1. 调试技巧：

   • 使用process.nextTick（Node）或queueMicrotask模拟微任务
   • 在关键节点添加console.log跟踪状态变化
   • 绘制状态转换图辅助理解

2. 常见错误：

   • 忘记处理then方法的参数默认值
   • 在resolvePromise中未处理thenable对象的异常
   • 静态方法实现时未统一处理非Promise输入

3. 性能优化：

   • 避免在then回调中创建不必要的Promise
   • 对批量操作使用Promise.all优化
   • 合理设置异步任务的并发数

五、学习资源推荐

1. 规范文档：

   • Promise/A+规范
   • ECMAScript 262标准中Promise部分

2. 实践工具：

   • promises-aplus-tests验证实现合规性
   • Chrome DevTools的Promise调试面板

3. 进阶阅读：

   • 《You Don’t Know JS: Async & Performance》
   • Vue/React源码中Promise的应用案例

通过系统掌握上述内容，开发者不仅能轻松应对面试中的手写Promise问题，更能获得处理复杂异步场景的底层思维。建议每天实现一个Promise变种方法，持续2周即可达到熟练水平。记住：真正的掌握不在于背下代码，而在于理解每个设计决策背后的原因。