一、为什么手写Promise能成为面试加分项？

在前端技术面试中，Promise的实现原理是区分候选人技术深度的重要标尺。据统计，73%的中高级前端岗位面试会涉及异步编程底层原理考察，而手写Promise能直观展现以下能力：

1. 异步编程思维：理解事件循环、任务队列与微任务的交互机制
2. 设计模式应用：掌握发布-订阅模式、观察者模式在Promise中的实现
3. API设计能力：展现如何设计符合直觉的链式调用接口
4. 错误处理意识：体现对异常边界的完整考虑

某大厂面试官曾表示：”能清晰解释Promise/A+规范并实现核心功能的候选人，通常具备解决复杂异步问题的潜力。”这正体现了手写Promise在技术评估中的特殊价值。

二、Promise核心机制解析

1. 状态机设计

Promise必须维护三种互斥状态：

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(executor) {
    this.state = PENDING;
    this.value = undefined;
    this.reason = undefined;
    // 存储成功回调
    this.onFulfilledCallbacks = [];
    // 存储失败回调
    this.onRejectedCallbacks = [];
  }
}

状态转换需遵循严格规则：

• 只能从pending转为fulfilled/rejected
• 状态一旦改变不可逆
• 状态变更必须触发对应回调

2. 异步执行保障

通过setTimeout确保executor异步执行：

constructor(executor) {
  try {
    executor(
      value => this.resolve(value),
      reason => this.reject(reason)
    );
  } catch (err) {
    this.reject(err);
  }
}
resolve(value) {
  if (this.state === PENDING) {
    setTimeout(() => {
      this.state = FULFILLED;
      this.value = value;
      this.onFulfilledCallbacks.forEach(fn => fn());
    }, 0);
  }
}

3. 链式调用实现

.then()方法需返回新Promise实现链式调用：

then(onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
  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);
    }
    // 类似处理rejected状态...
  });
  return promise2;
}

三、Promise/A+规范实现要点

1. 返回值穿透

实现then方法的返回值穿透机制：

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

2. 错误处理链

确保错误沿链向下传递：

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

四、面试应对策略

1. 渐进式实现方案

建议采用三步实现法：

1. 基础版：实现状态管理和.then()方法
2. 进阶版：添加错误处理和链式调用
3. 规范版：完整实现Promise/A+规范

2. 常见问题解答

Q1：Promise和async/await的区别？
A：Promise是异步编程的解决方案，async/await是其语法糖。底层仍依赖Promise的微任务机制。

Q2：如何实现Promise.all？

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

3. 性能优化技巧

1. 使用Map替代数组存储回调，提升查找效率
2. 实现批量执行策略（如Promise.allSettled）
3. 添加取消Promise的功能（通过AbortController）

五、实战案例分析

案例：实现带超时的Promise

function promiseWithTimeout(promise, timeout) {
  let timeoutId;
  const timeoutPromise = new MyPromise((_, reject) => {
    timeoutId = setTimeout(() => {
      reject(new Error('Promise timeout'));
    }, timeout);
  });
  return MyPromise.race([promise, timeoutPromise]).finally(() => {
    clearTimeout(timeoutId);
  });
}

此实现展示了：

• Promise.race的应用
• 资源清理的重要性
• 组合式API设计

六、学习资源推荐

1. 规范文档：Promise/A+规范（https://promisesaplus.com/）
2. 测试工具：promises-aplus-tests（用于验证实现合规性）
3. 进阶阅读：《You Don’t Know JS: Async & Performance》

手写Promise不仅是技术展示，更是系统设计能力的体现。建议开发者：

1. 从简化版开始逐步完善
2. 编写单元测试验证边界条件
3. 对比原生Promise行为差异
4. 在实际项目中尝试替换使用

通过系统化的实现过程，你将深入理解JavaScript异步编程的本质，这种深度思考能力正是面试官所看重的核心竞争力。记住，优秀的实现不仅要通过测试用例，更要体现清晰的架构思维和严谨的边界处理。