从一道让我失眠的 Promise 面试题开始，深入分析 Promise 实现细节

一、引发失眠的面试题：一道看似简单却暗藏玄机的Promise链

那是一个深夜，我在准备前端面试时遇到这样一道题：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('success'), 1000);
});
promise
  .then(() => {
    throw new Error('then error');
  })
  .catch(err => {
    console.log(err.message); // 输出什么？
    return 'caught';
  })
  .then(res => {
    console.log(res); // 输出什么？
  });

初看之下，我自信地认为会先输出”then error”再输出”caught”，但当手动模拟执行流程时，却因状态转换和异步时序的复杂性陷入困惑。这道题最终让我辗转反侧，也促使我彻底拆解Promise的实现机制。

二、Promise核心机制解析

1. 状态机的不可逆性

Promise规范定义了三种状态：

• Pending（初始状态）
• Fulfilled（成功状态）
• Rejected（失败状态）

关键特性：

• 状态单向流转：一旦从Pending转为Fulfilled/Rejected，不可再次变更
• 异步决议：即使同步调用resolve/reject，状态变更和回调执行也是微任务队列处理

// 验证状态不可逆
const p = new Promise((resolve) => {
  resolve(1);
  resolve(2); // 无效
  p.then(console.log); // 仅输出1
});

2. 微任务队列的执行时机

Promise回调通过queueMicrotask或类似机制加入微任务队列，其执行优先级高于宏任务但低于当前调用栈：

console.log('script start');
setTimeout(() => {
  console.log('setTimeout');
}, 0);
new Promise((resolve) => {
  console.log('Promise executor');
  resolve();
}).then(() => {
  console.log('Promise then');
});
console.log('script end');
// 输出顺序：
// script start → Promise executor → script end → Promise then → setTimeout

3. 链式调用的值穿透机制

.then()方法返回新Promise的特性：

• 若回调返回普通值，新Promise以该值Fulfilled
• 若返回Promise，则链式等待其决议
• 若抛出异常，新Promise以该异常Rejected

Promise.resolve(1)
  .then(res => {
    console.log(res); // 1
    return res * 2;
  })
  .then(res => {
    console.log(res); // 2
    return Promise.resolve(res * 3);
  })
  .then(res => {
    console.log(res); // 6
  });

三、源码级实现剖析

1. 简易Promise实现框架

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);
    }
  }
  then(onFulfilled, onRejected) {
    // 实现略（需处理值穿透、异步调度等）
  }
}

2. 关键方法实现要点

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') {
      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 {
      this.onFulfilledCallbacks.push(() => {
        queueMicrotask(() => {
          // 类似fulfilled状态处理
        });
      });
      this.onRejectedCallbacks.push(() => {
        queueMicrotask(() => {
          // 类似rejected状态处理
        });
      });
    }
  });
  return promise2;
}

resolvePromise决议逻辑：

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. 错误处理范式

// 推荐：集中处理错误
fetchData()
  .then(processData)
  .catch(error => {
    console.error('处理失败:', error);
    return getDefaultData(); // 提供降级方案
  })
  .then(displayData);

2. 性能优化技巧

• 避免同步链式调用：将独立Promise并行化
  ```javascript
  // 不推荐（串行执行）
  Promise.resolve()
  .then(() => heavyTask1())
  .then(() => heavyTask2());

// 推荐（并行执行）
Promise.all([
heavyTask1(),
heavyTask2()
]).then(([res1, res2]) => {
// 处理结果
});

### 3. 调试技巧
- 使用`Promise.race`设置超时控制：
```javascript
const fetchWithTimeout = (url, timeout = 5000) => {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('请求超时')), timeout)
    )
  ]);
};

五、回到面试题：完整执行流程解析

1. 初始Promise在1000ms后转为Fulfilled状态，值为”success”
2. 第一个.then()回调抛出异常，生成Rejected状态的Promise
3. .catch()捕获异常，输出”then error”，返回”caught”
4. 返回的”caught”使链式调用进入Fulfilled状态
5. 最终.then()输出”caught”

最终输出：

then error
caught

结语

这道让我失眠的面试题，实则是通往Promise深层理解的钥匙。从状态机的不可逆性到微任务调度，从链式调用的值穿透到源码级实现，每个细节都蕴含着JavaScript异步编程的智慧。掌握这些原理不仅能轻松应对面试，更能在实际开发中编写出更健壮、高效的异步代码。建议开发者通过实现简易Promise、绘制执行流程图等方式深化理解，最终达到”知其然且知其所以然”的境界。