从一道Promise面试题到源码级理解：开发者必知的实现逻辑

一、一道让我失眠的Promise面试题

那是一个深夜，我盯着手机屏幕上的面试题反复思考：

const p1 = new Promise((resolve) => {
  setTimeout(() => resolve('p1'), 1000);
});
const p2 = new Promise((resolve) => {
  resolve('p2');
});
Promise.race([p1, p2])
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

问题：这段代码的输出是什么？为什么？

看似简单的题目却让我辗转反侧。表面是Promise.race的竞争机制，但背后涉及Promise的状态管理、异步任务调度、微任务队列等深层原理。这促使我重新梳理Promise的实现细节。

二、Promise的核心实现逻辑

1. 状态机模型：不可逆的三态转换

Promise的本质是一个状态机，包含三种状态：

• Pending：初始状态，可转换为Fulfilled或Rejected
• Fulfilled：操作成功，状态不可变
• Rejected：操作失败，状态不可变

关键规则：

• 状态只能从Pending转为Fulfilled/Rejected，不可逆
• 每个Promise只有一个最终状态值（value或reason）

源码示例（简化版）：

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

2. 异步任务调度：微任务队列的优先级

Promise的回调执行遵循微任务机制，其优先级高于宏任务（如setTimeout），但低于process.nextTick（Node.js环境）。

执行顺序：

1. 同步代码执行
2. 微任务队列（Promise.then/catch/finally）
3. 宏任务队列（setTimeout/setInterval）

面试题解析：

• p2立即resolve，状态转为Fulfilled
• p1在1秒后resolve，但此时Promise.race已决出结果
• 输出结果为'p2'，因为Promise.race取第一个转为非Pending状态的Promise

3. 链式调用：then方法的实现原理

then方法的核心是返回新Promise，实现链式调用。其内部逻辑包括：

• 接收onFulfilled和onRejected回调
• 将回调加入对应队列（根据当前状态）
• 返回新Promise，其状态由回调的返回值决定

关键点：

• 回调函数返回普通值：新Promise状态为Fulfilled，值为该值
• 回调函数返回Promise：新Promise状态跟随该Promise
• 回调函数抛出异常：新Promise状态为Rejected，值为异常

源码示例：

then(onFulfilled, onRejected) {
  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;
}

三、Promise的进阶实现细节

1. resolvePromise函数：处理链式调用的核心

该函数决定新Promise的状态，需处理三种情况：

• 回调返回普通值：直接resolve
• 回调返回Promise：跟踪该Promise状态
• 回调返回自身：抛出TypeError（避免循环引用）

实现示例：

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. 静态方法实现：all/race/allSettled/any

• Promise.all：所有Promise成功时resolve，否则reject（第一个错误）
• Promise.race：第一个非Pending状态的Promise决定结果
• Promise.allSettled：所有Promise完成时resolve（含成功/失败状态）
• Promise.any：第一个成功的Promise决定结果，全部失败时reject

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

四、实用建议与最佳实践

1. 错误处理：始终为.then()提供.catch()，或使用async/await+try/catch

   // 不推荐
   somePromise.then(() => doSomething());
   // 推荐
   somePromise.then(() => doSomething()).catch(handleError);

2. 避免Promise嵌套：使用链式调用替代嵌套

   // 不推荐
   new Promise(resolve => {
     resolve(new Promise(resolve => {
       resolve('value');
     }));
   }).then(console.log);
   // 推荐
   Promise.resolve('value').then(console.log);

3. 性能优化：合并并行Promise（如Promise.all）而非串行执行

4. 调试技巧：利用Promise.prototype.finally进行资源清理

   fetch('https://api.example.com')
     .then(response => response.json())
     .catch(error => console.error('Error:', error))
     .finally(() => console.log('Request completed'));

五、总结：从面试题到源码级理解

这道让我失眠的面试题，揭示了Promise设计的精妙之处：

1. 状态不可逆确保结果确定性
2. 微任务队列平衡响应速度与主线程负载
3. 链式调用通过返回新Promise实现组合
4. 静态方法提供多种并发控制模式

深入理解Promise的实现细节，不仅能轻松应对面试，更能写出更健壮、高效的异步代码。建议开发者通过以下方式巩固知识：

1. 手动实现简化版Promise
2. 阅读ECMAScript规范中Promise的定义
3. 分析实际项目中的Promise使用模式

Promise作为JavaScript异步编程的基石，其设计思想值得每一位开发者深入探究。