让面试官为你停留——手写简易版Promise

在前端开发面试中，Promise的实现原理是高频考点，它不仅考察对异步编程的理解，更体现对JavaScript事件循环、闭包等核心概念的掌握。本文将通过手写一个简易版Promise，带你深入理解其工作机制，并提供面试应对策略，助你在技术面试中脱颖而出。

一、为什么面试官钟爱Promise实现题？

Promise作为ES6的核心特性，彻底改变了JavaScript的异步编程模式。面试官通过考察Promise实现，主要评估以下能力：

1. 异步编程思维：能否清晰描述异步任务的处理流程
2. 事件循环理解：对微任务/宏任务队列的认知深度
3. 闭包应用：如何通过闭包管理状态和回调
4. API设计能力：链式调用、状态不可变等特性的实现方式

某大厂面试官透露：”能准确实现Promise的候选人，80%能通过后续系统设计面试。”这印证了该知识点对评估开发者潜力的关键作用。

二、Promise核心机制拆解

实现简易Promise前，需明确三个核心特性：

1. 状态机：pending → fulfilled/rejected 的单向转换
2. 链式调用：通过then方法返回新Promise实现
3. 异步调度：使用微任务队列（如MutationObserver或setTimeout(0)）

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;
        // 异步执行回调
        queueMicrotask(() => {
          this.onFulfilledCallbacks.forEach(fn => fn(value));
        });
      }
    };
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        queueMicrotask(() => {
          this.onRejectedCallbacks.forEach(fn => fn(reason));
        });
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  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') {
        queueMicrotask(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        });
      } else if (this.state === 'rejected') {
        queueMicrotask(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        });
      } else if (this.state === 'pending') {
        this.onFulfilledCallbacks.push((value) => {
          queueMicrotask(() => {
            try {
              const x = onFulfilled(value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          });
        });
        this.onRejectedCallbacks.push((reason) => {
          queueMicrotask(() => {
            try {
              const x = onRejected(reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          });
        });
      }
    });
    return promise2;
  }
}
// 处理then返回值与新Promise的关系
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);
  }
}

三、面试应对策略

1. 代码实现要点

• 状态管理：强调状态的不可逆性
• 异步调度：说明为何使用微任务而非宏任务
• 错误处理：展示try-catch的合理使用
• 链式调用：解释then方法返回新Promise的机制

2. 常见问题解答

Q1：为什么Promise.resolve(42).then(()=>{}, ()=>{})会忽略拒绝？
A：第二个参数是onRejected回调，当第一个参数存在时，拒绝状态会被忽略。正确做法是只传一个参数，或使用catch。

Q2：如何实现Promise.all？

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

3. 扩展知识准备

• 与async/await的关系：解释编译器如何转换async函数
• 取消Promise：讨论AbortController的实现方案
• 性能优化：分析Promise链的内存消耗

四、实战中的优化技巧

1. 错误堆栈追踪：原生Promise能保留完整的异步调用栈，自定义实现可通过Error.captureStackTrace模拟
2. 调试技巧：使用Promise.prototype[Symbol.toStringTag] = ‘MyPromise’便于调试
3. 性能考量：避免在then回调中创建过多闭包，可使用对象池模式

五、面试官视角的加分项

1. 代码可读性：变量命名清晰（如onFulfilledCallbacks而非onFulfill）
2. 边界处理：考虑null/undefined输入、循环引用等情况
3. 规范遵循：符合Promises/A+规范测试用例
4. 知识延伸：能对比jQuery Deferred、RSVP等实现差异

某资深面试官建议：”候选人实现时，我会观察其是否先设计数据结构，再实现核心方法，最后处理边缘情况。这种分层实现思路体现工程思维。”

通过系统掌握Promise实现原理，你不仅能从容应对面试，更能深入理解JavaScript异步编程的本质。建议结合Promise/A+规范测试用例（https://promisesaplus.com/）进行验证，确保实现的严谨性。记住，面试官真正考察的是你对底层原理的掌握程度，而非单纯记忆API用法。