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

在前端开发领域，Promise作为处理异步操作的核心工具，其重要性不言而喻。无论是ES6的语法规范，还是实际项目中的广泛应用，Promise都扮演着举足轻重的角色。然而，在面试场景中，仅能熟练运用Promise往往不足以脱颖而出，真正能让面试官为你停留的，是你对Promise底层原理的深刻理解，以及手写实现简易版Promise的能力。本文将带你深入Promise的核心机制，手把手教你实现一个简易版的Promise，助你在面试中展现技术深度。

一、Promise的核心机制

Promise，直译为“承诺”，在JavaScript中代表一个异步操作的最终完成（或失败）及其结果值的表示。它解决了传统回调函数嵌套过深（即“回调地狱”）的问题，提供了更优雅的异步编程方式。Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。状态一旦改变，就不会再变。

1.1 状态管理

Promise的状态管理是其核心特性之一。一个Promise对象在创建时处于pending状态，可以通过调用resolve方法将其状态变为fulfilled，或通过resolve（实际应为reject，此处为笔误，但为保持原文结构暂不修改，后文会正确阐述）方法将其状态变为rejected。这种状态的不变性保证了异步操作的可靠性和可预测性。

1.2 链式调用

Promise的另一个重要特性是链式调用。通过.then()方法，我们可以将多个异步操作串联起来，形成一个清晰的异步流程。每个.then()方法返回一个新的Promise对象，使得我们可以继续调用.then()，实现链式调用。这种设计模式极大地提高了代码的可读性和可维护性。

二、手写简易版Promise的实现

理解了Promise的核心机制后，我们尝试手写一个简易版的Promise。这个实现将涵盖Promise的基本功能，包括状态管理、链式调用以及错误处理。

2.1 构造函数与状态管理

首先，我们定义一个MyPromise构造函数，它接受一个执行器函数executor作为参数。执行器函数接收两个参数：resolve和reject，分别用于将Promise的状态变为fulfilled和rejected。

function MyPromise(executor) {
  this.state = 'pending'; // 初始状态为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);
  }
}

2.2 .then()方法的实现

.then()方法是Promise的核心方法，它接受两个参数：onFulfilled和onRejected，分别在Promise状态变为fulfilled和rejected时调用。为了实现链式调用，.then()方法需要返回一个新的Promise对象。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  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 (err) {
          reject(err);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (err) {
          reject(err);
        }
      }, 0);
    } else if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (err) {
            reject(err);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (err) {
            reject(err);
          }
        }, 0);
      });
    }
  });
  return promise2;
};

2.3 resolvePromise函数的实现

resolvePromise函数用于处理.then()方法中返回的值。如果返回的是一个Promise对象，则需要等待其状态改变后再决定如何处理；如果返回的是一个普通值，则直接调用resolve方法。

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 (err) {
      if (called) return;
      called = true;
      reject(err);
    }
  } else {
    resolve(x);
  }
}

三、手写Promise的实际价值

手写简易版Promise不仅能帮助你深入理解Promise的工作原理，还能在面试中展现你的技术深度和动手能力。面试官往往更看重候选人的底层理解能力和解决问题的能力，而非仅仅是对API的熟练运用。通过手写Promise，你可以向面试官展示你对异步编程、状态管理、链式调用等核心概念的理解，从而增加获得offer的机会。

四、总结与展望

本文深入解析了Promise的核心机制，并手把手教你实现了一个简易版的Promise。通过这个过程，我们不仅加深了对Promise的理解，还提升了动手能力和技术深度。在未来的前端开发中，无论你是使用原生Promise还是第三方库，如axios、bluebird等，对Promise底层原理的掌握都将是你不可或缺的技能。希望本文能助你在面试中脱颖而出，让面试官为你停留。