前端面试100道手写题（1）—— 手写Promise实现

在前端开发领域，Promise作为处理异步操作的核心机制，几乎出现在每一场技术面试中。手写Promise不仅考察开发者对异步编程的理解深度，更是检验其代码实现能力和对ES6规范的掌握程度。本文将系统解析Promise的实现原理，并提供可运行的代码示例，帮助读者在面试中脱颖而出。

一、Promise核心机制解析

Promise本质上是JavaScript中用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。根据ES6规范，Promise有三种状态：

• Pending（待定）：初始状态，既非成功也非失败
• Fulfilled（已兑现）：意味着操作成功完成
• Rejected（已拒绝）：意味着操作失败

状态转变具有不可逆性，一旦从Pending转为Fulfilled或Rejected，就不能再改变。这种设计确保了异步操作结果的确定性。

1.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 = [];
    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);
    }
  }
}

这段代码实现了Promise的基本状态管理，包括：

• 初始状态设置为PENDING
• 提供resolve和reject方法修改状态
• 状态变更后执行对应的回调函数
• 捕获executor执行中的异常

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

Promise的核心价值在于then方法提供的链式调用能力。实现then方法需要考虑：

1. 异步处理的微任务队列特性（实际实现可用setTimeout模拟）
2. 值穿透机制（then返回新Promise）
3. 回调函数的异步执行

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

2.2 关键细节解析

1. 异步执行：使用setTimeout模拟微任务队列，确保回调函数异步执行
2. 参数默认值：处理then方法不传参数的情况，实现值穿透
3. 错误捕获：对回调函数执行进行try-catch包装
4. 链式调用：then方法返回新Promise，实现链式调用

三、Promise解析过程规范

根据Promise/A+规范，then方法返回的Promise解析过程需要遵循特定规则。我们实现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. 循环引用检测
2. 多次调用保护
3. thenable对象处理
4. 异常捕获

四、完整类方法实现

基于上述核心实现，我们可以补充Promise的其他标准方法：

4.1 catch方法实现

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

4.2 finally方法实现

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

4.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((resolve, reject) => reject(reason));
}
// 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)
      );
    });
  });
}
// Promise.race
static race(promises) {
  return new MyPromise((resolve, reject) => {
    promises.forEach(promise => {
      MyPromise.resolve(promise).then(resolve, reject);
    });
  });
}

五、面试应对策略与建议

1. 理解优于记忆：面试官更关注实现思路而非完整代码，重点阐述状态管理、异步处理和链式调用原理
2. 逐步实现：从基础状态管理开始，逐步添加then方法、解析过程和静态方法
3. 测试用例准备：准备常见测试场景，如：
   • 基本同步/异步操作
   • 链式调用
   • 错误处理
   • Promise.all/race使用
4. 规范遵循：强调实现符合Promise/A+规范，特别是解析过程

六、实际应用中的优化点

1. 性能优化：使用更高效的异步调度方式（如MutationObserver或MessageChannel）替代setTimeout
2. 错误边界：增强全局错误捕获机制
3. 调试支持：添加Promise链跟踪功能
4. 取消功能：实现可取消的Promise扩展

结语

手写Promise实现是对前端开发者异步编程能力的全面考察。通过理解其核心机制、状态管理、链式调用和解析规范，不仅能顺利通过面试，更能深入掌握JavaScript异步编程的本质。建议读者在实际开发中多实践Promise模式，并参考Promise/A+规范不断完善自己的实现。

完整实现代码约200行，上述示例展示了核心逻辑。在实际面试中，可根据时间限制选择重点部分实现，同时清晰阐述设计思路和关键考虑点，这将大大提升面试表现。