1. 手写Promise的核心价值与实现意义
第一次接触Promise这个概念是在2015年ES6标准发布时，当时前端开发中回调地狱(callback hell)问题已经严重到令人发指的地步。我记得最夸张的一个项目里，有个函数嵌套了8层回调，代码缩进都快跑到屏幕右边去了。Promise的出现就像黑暗中的一束光，而理解它的最好方式就是亲手实现一个。
手写Promise不是面试造火箭的噱头，它能让你：
- 彻底吃透Promise/A+规范的核心机制
- 理解异步编程的底层运作原理
- 掌握更优雅的异步代码组织方式
- 为理解更高级的async/await打下基础
2. Promise核心机制解析
2.1 状态机的设计哲学
Promise本质上是一个状态机，包含三个不可逆的状态：
- pending：初始状态，既不是成功也不是失败
- fulfilled：操作成功完成
- rejected：操作失败
这种设计保证了：
- 状态一旦改变就不会再变（不可逆性）
- 无论成功或失败都会有一个确定的结果
- 符合现实世界中"承诺"的语义
class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; // 后续会添加回调队列 } }2.2 执行器函数的双向通道
executor是Promise构造函数接收的函数参数，它有两个关键特性：
- 立即执行（同步执行）
- 提供resolve/reject两个回调函数
const promise = new MyPromise((resolve, reject) => { // 这里是同步执行的 if (success) { resolve(value); } else { reject(reason); } });关键细节：如果在executor中抛出异常，应该直接reject这个promise。这是很多人手写时容易忽略的边界情况。
3. 实现基础状态管理
3.1 状态转换的实现
我们需要在MyPromise类中添加状态转换方法：
class MyPromise { // ...其他代码 _resolve(value) { if (this.state !== 'pending') return; this.state = 'fulfilled'; this.value = value; // 后续会处理回调队列 } _reject(reason) { if (this.state !== 'pending') return; this.state = 'rejected'; this.reason = reason; // 后续会处理回调队列 } }3.2 执行器的错误处理
完善构造函数中的错误处理：
constructor(executor) { // ...初始化代码 try { executor( value => this._resolve(value), reason => this._reject(reason) ); } catch (err) { this._reject(err); } }4. 实现then方法
4.1 then方法的基本结构
then方法是Promise的核心，它需要：
- 接收onFulfilled和onRejected两个回调
- 返回一个新的Promise（链式调用基础）
- 根据当前状态决定立即执行还是暂存回调
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); } }); } else if (this.state === 'rejected') { // 类似处理rejected状态 } else { // pending状态时存储回调 } }); return promise2; }4.2 回调队列的实现
处理pending状态时的回调存储：
constructor(executor) { // ...其他初始化 this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; } // 在_resolve中添加： this.onFulfilledCallbacks.forEach(fn => fn()); // _reject中类似4.3 resolvePromise的实现
这是Promise/A+规范中最复杂的部分，处理各种返回值情况：
function resolvePromise(promise2, x, resolve, reject) { // 防止循环引用 if (promise2 === x) { return reject(new TypeError('Chaining cycle detected')); } // 如果x是Promise实例 if (x instanceof MyPromise) { x.then(resolve, reject); } // 处理thenable对象 else if (typeof x === 'object' || typeof x === 'function') { if (x === null) { return resolve(x); } let then; try { then = x.then; } catch (e) { return reject(e); } if (typeof then === 'function') { // 处理thenable } else { resolve(x); } } else { resolve(x); } }5. 完整实现与边界处理
5.1 默认回调的处理
根据Promise/A+规范：
- 如果onFulfilled不是函数，需要提供默认实现
- 如果onRejected不是函数，需要提供默认实现
then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; }; // ...其余代码 }5.2 异步执行的保证
Promise的回调必须是异步执行的，即使当前状态已经确定：
if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }6. 实现其他静态方法
6.1 Promise.resolve
static resolve(value) { if (value instanceof MyPromise) { return value; } return new MyPromise(resolve => { resolve(value); }); }6.2 Promise.reject
static reject(reason) { return new MyPromise((_, reject) => { reject(reason); }); }6.3 Promise.all
static all(promises) { return new MyPromise((resolve, reject) => { const results = []; let count = 0; promises.forEach((promise, index) => { MyPromise.resolve(promise).then( value => { results[index] = value; count++; if (count === promises.length) { resolve(results); } }, reject ); }); }); }7. 常见问题与调试技巧
7.1 为什么then方法要返回新Promise？
这是实现链式调用的关键。每次调用then都创建一个新Promise，使得我们可以无限衔接异步操作：
promise .then(handle1) .then(handle2) .then(handle3);7.2 如何处理thenable对象？
thenable是指有then方法的对象，这是为了兼容其他Promise实现：
const thenable = { then: function(resolve, reject) { resolve(42); } }; MyPromise.resolve(thenable).then(console.log); // 427.3 调试Promise的技巧
- 在_resolve和_reject方法中添加console.log
- 使用try-catch包裹所有回调执行
- 验证微任务时序是否正确（可以用queueMicrotask替代setTimeout）
8. 性能优化与实践建议
8.1 避免不必要的Promise创建
// 不推荐 function getData() { return new Promise(resolve => { resolve(fetchData()); }); } // 推荐 function getData() { return Promise.resolve(fetchData()); }8.2 错误处理的最佳实践
// 不好的方式 promise.then( handleSuccess, handleError ).then(...); // 这里的then仍然会执行 // 推荐方式 promise .then(handleSuccess) .catch(handleError); // 捕获链中任何错误8.3 取消功能的实现思路
虽然Promise没有内置取消功能，但可以通过包装实现：
function cancellablePromise(promise) { let isCancelled = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then( value => !isCancelled && resolve(value), error => !isCancelled && reject(error) ); }); return { promise: wrappedPromise, cancel: () => { isCancelled = true; } }; }9. Promise与事件循环的深度关联
9.1 微任务队列的执行时机
Promise回调属于微任务，会在当前宏任务结束后立即执行：
console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('promise1'); }).then(() => { console.log('promise2'); }); console.log('script end'); // 输出顺序： // script start // script end // promise1 // promise2 // setTimeout9.2 手写Promise中的异步调度
在我们的实现中使用setTimeout模拟微任务，实际上现代JavaScript引擎有更高效的微任务API：
// 更精确的微任务调度 const asyncFn = typeof queueMicrotask === 'function' ? queueMicrotask : callback => Promise.resolve().then(callback);10. 从Promise到async/await
10.1 async函数的本质
async函数其实就是返回Promise的语法糖：
async function foo() { return 1; } // 等价于 function foo() { return Promise.resolve(1); }10.2 await的工作机制
await会暂停async函数执行，直到Promise解决：
async function bar() { const result = await somePromise; console.log(result); } // 类似 function bar() { return somePromise.then(result => { console.log(result); }); }10.3 错误处理的演变
从Promise的.catch到try-catch：
// Promise风格 fetchData() .then(handleData) .catch(handleError); // async/await风格 try { const data = await fetchData(); handleData(data); } catch (err) { handleError(err); }手写Promise的过程让我深刻理解了JavaScript异步编程的演进历程。从最初的回调地狱到Promise的链式调用，再到async/await的同步写法，每一层抽象都让异步代码更易于编写和维护。建议每个前端开发者都应该至少完整实现一次Promise，这会让你在调试复杂异步流程时事半功倍。