1. 从零手写Promise深入理解异步编程核心机制作为一名前端开发者我至今记得第一次遇到Promise时那种困惑又好奇的感觉。Promise作为现代JavaScript异步编程的基石其设计理念和实现机制值得我们深入探究。今天我将带大家从零开始手写一个符合Promise/A规范的Promise实现通过拆解每个核心模块让你彻底掌握Promise的工作原理。在开始之前我们需要明确几个关键概念Promise本质上是一个状态机具有pending、fulfilled和rejected三种状态它通过then方法的链式调用实现了优雅的异步流程控制其核心规范要求回调必须异步执行且状态一旦改变就不可逆转。理解这些特性对我们后续的实现至关重要。2. 基础架构设计与状态管理2.1 核心状态常量定义任何Promise实现的第一步都是定义其三种基本状态。这三种状态构成了Promise状态机的基础const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected;使用常量而非直接字符串的好处显而易见避免拼写错误、提高代码可读性更重要的是体现了Promise状态不可变的特性。在规范的2.1章节中明确规定Promise的状态一旦从pending转变为fulfilled或rejected就不可再改变。2.2 Promise类的基本结构让我们构建Promise类的骨架这是整个实现的核心class MyPromise { constructor(executor) { this.status PENDING; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; // 其他实现... } // 其他方法... }这里有几个关键点需要注意status属性记录当前Promise的状态初始为PENDINGvalue和reason分别存储成功的结果和失败的原因两个回调数组用于处理异步情况下的回调存储2.3 执行器函数与状态转换执行器函数(executor)是Promise构造函数接收的参数它包含实际的异步操作constructor(executor) { // 初始化代码... try { const resolve (value) { if (this.status PENDING) { this.status FULFILLED; this.value value; this.onFulfilledCallbacks.forEach(cb cb()); } }; const reject (reason) { if (this.status PENDING) { this.status REJECTED; this.reason reason; this.onRejectedCallbacks.forEach(cb cb()); } }; executor(resolve, reject); } catch (error) { reject(error); } }这里有几个关键实现细节resolve和reject函数都包含状态检查确保只有pending状态才能转换使用try-catch包裹executor执行确保同步错误能被捕获并reject状态改变后会立即执行所有存储的回调函数重要提示原生Promise的回调执行是微任务(microtask)这里我们用宏任务模拟。在实际实现中应该使用queueMicrotask或MutationObserver等API实现真正的微任务。3. then方法的实现与链式调用3.1 then方法的基本结构then方法是Promise最核心的部分它实现了Promise的链式调用特性then(onFulfilled, onRejected) { // 参数处理 onFulfilled typeof onFulfilled function ? onFulfilled : value value; onRejected typeof onRejected function ? onRejected : reason { throw reason }; const promise2 new MyPromise((resolve, reject) { // 根据不同状态处理 }); return promise2; }这里有几个关键点参数可选处理当onFulfilled或onRejected不是函数时提供默认实现总是返回新的Promise实例这是链式调用的基础根据当前Promise的状态采取不同的处理策略3.2 状态处理与回调执行then方法需要处理三种可能的状态情况if (this.status FULFILLED) { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); } else if (this.status REJECTED) { setTimeout(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); } else { // PENDING状态 this.onFulfilledCallbacks.push(() { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); this.onRejectedCallbacks.push(() { setTimeout(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); }关键实现细节使用setTimeout确保回调异步执行模拟微任务使用try-catch捕获回调执行中的错误pending状态时将回调存入数组等待状态改变后执行使用resolvePromise处理回调的返回值3.3 resolvePromise的实现resolvePromise函数是then方法的核心辅助函数它负责处理各种可能的返回值function resolvePromise(promise2, x, resolve, reject) { if (promise2 x) { return reject(new TypeError(循环引用)); } if (x instanceof MyPromise) { x.then(resolve, reject); } else if (x ! null (typeof x object || typeof x function)) { let called false; 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; reject(e); } } else { resolve(x); } }这个函数处理了以下几种情况防止循环引用promise2 x处理返回Promise实例的情况处理thenable对象有then方法的对象处理普通值注意事项called标志位是为了确保thenable对象的then方法只能调用resolve或reject一次这是Promise/A规范的要求。4. 其他实例方法与静态方法实现4.1 catch与finally方法catch和finally都是基于then方法的语法糖catch(onRejected) { return this.then(null, onRejected); } finally(callback) { return this.then( value MyPromise.resolve(callback()).then(() value), reason MyPromise.resolve(callback()).then(() { throw reason }) ); }finally的实现有几个关键点无论成功失败都会执行callback保持原Promise的值或原因如果callback返回Promise会等待它完成4.2 静态方法实现Promise的静态方法提供了便捷的创建和处理Promise的方式static resolve(value) { if (value instanceof MyPromise) return value; return new MyPromise(resolve resolve(value)); } static reject(reason) { return new MyPromise((_, reject) reject(reason)); } static all(promises) { return new MyPromise((resolve, reject) { const result []; let count 0; promises.forEach((p, i) { MyPromise.resolve(p).then(value { result[i] value; if (count promises.length) resolve(result); }, reject); }); if (promises.length 0) resolve(result); }); } static race(promises) { return new MyPromise((resolve, reject) { promises.forEach(p { MyPromise.resolve(p).then(resolve, reject); }); }); }all方法的实现要点返回的Promise在所有输入Promise完成时resolve保持结果的顺序与输入顺序一致任何一个Promise reject时立即rejectrace方法的实现要点第一个完成无论成功失败的Promise决定结果其他Promise的结果被忽略5. 常见问题与调试技巧5.1 异步执行顺序问题在实现Promise时最容易出错的就是回调的执行顺序。根据Promise/A规范then方法的回调必须异步执行多个then回调的执行顺序应该按照注册顺序测试用例const p new MyPromise(resolve resolve(done)); p.then(value console.log(第一个then)); console.log(同步代码); // 正确输出顺序 // 同步代码 // 第一个then5.2 值穿透问题值穿透是指当then的参数不是函数时值应该直接传递到下一个thenMyPromise.resolve(foo) .then(不是函数) .then(value console.log(value)); // 应该输出foo5.3 循环引用检测Promise实现必须检测并拒绝循环引用const p1 new MyPromise(resolve { const p2 new MyPromise(res res(p1)); resolve(p2); }); p1.then(() {}, reason console.log(reason)); // 应该输出TypeError5.4 调试技巧在关键位置添加console.log跟踪状态变化和回调执行使用Promise测试套件验证实现是否符合规范特别注意边界情况空数组、null值、非Promise的thenable对象等6. Promise实现的核心要点总结通过这个手写Promise的过程我们可以总结出几个核心要点状态管理Promise是一个状态机状态一旦改变就不可逆转异步执行所有回调必须异步执行确保执行顺序的一致性链式调用then方法总是返回新的Promise实现链式调用值处理需要正确处理各种返回值普通值、Promise、thenable错误处理同步错误和异步错误都需要被捕获并传递在实际项目中理解这些原理有助于我们更好地使用Promise处理各种复杂的异步场景。虽然现代JavaScript已经提供了async/await语法糖但Promise仍然是其底层实现机制深入理解Promise对提升异步编程能力至关重要。最后分享一个我在实现过程中遇到的坑最初我没有正确处理thenable对象导致某些特殊情况下Promise行为不符合预期。后来通过仔细阅读规范并添加专门的测试用例才发现了这个问题。这提醒我们在实现复杂功能时完善的测试用例和规范文档是多么重要。 
长河君 · 2026/9/17 5:41:35 · 阅读 1.2k 手写Promise实现：深入理解JavaScript异步编程
1. 从零手写Promise深入理解异步编程核心机制作为一名前端开发者我至今记得第一次遇到Promise时那种困惑又好奇的感觉。Promise作为现代JavaScript异步编程的基石其设计理念和实现机制值得我们深入探究。今天我将带大家从零开始手写一个符合Promise/A规范的Promise实现通过拆解每个核心模块让你彻底掌握Promise的工作原理。在开始之前我们需要明确几个关键概念Promise本质上是一个状态机具有pending、fulfilled和rejected三种状态它通过then方法的链式调用实现了优雅的异步流程控制其核心规范要求回调必须异步执行且状态一旦改变就不可逆转。理解这些特性对我们后续的实现至关重要。2. 基础架构设计与状态管理2.1 核心状态常量定义任何Promise实现的第一步都是定义其三种基本状态。这三种状态构成了Promise状态机的基础const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected;使用常量而非直接字符串的好处显而易见避免拼写错误、提高代码可读性更重要的是体现了Promise状态不可变的特性。在规范的2.1章节中明确规定Promise的状态一旦从pending转变为fulfilled或rejected就不可再改变。2.2 Promise类的基本结构让我们构建Promise类的骨架这是整个实现的核心class MyPromise { constructor(executor) { this.status PENDING; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; // 其他实现... } // 其他方法... }这里有几个关键点需要注意status属性记录当前Promise的状态初始为PENDINGvalue和reason分别存储成功的结果和失败的原因两个回调数组用于处理异步情况下的回调存储2.3 执行器函数与状态转换执行器函数(executor)是Promise构造函数接收的参数它包含实际的异步操作constructor(executor) { // 初始化代码... try { const resolve (value) { if (this.status PENDING) { this.status FULFILLED; this.value value; this.onFulfilledCallbacks.forEach(cb cb()); } }; const reject (reason) { if (this.status PENDING) { this.status REJECTED; this.reason reason; this.onRejectedCallbacks.forEach(cb cb()); } }; executor(resolve, reject); } catch (error) { reject(error); } }这里有几个关键实现细节resolve和reject函数都包含状态检查确保只有pending状态才能转换使用try-catch包裹executor执行确保同步错误能被捕获并reject状态改变后会立即执行所有存储的回调函数重要提示原生Promise的回调执行是微任务(microtask)这里我们用宏任务模拟。在实际实现中应该使用queueMicrotask或MutationObserver等API实现真正的微任务。3. then方法的实现与链式调用3.1 then方法的基本结构then方法是Promise最核心的部分它实现了Promise的链式调用特性then(onFulfilled, onRejected) { // 参数处理 onFulfilled typeof onFulfilled function ? onFulfilled : value value; onRejected typeof onRejected function ? onRejected : reason { throw reason }; const promise2 new MyPromise((resolve, reject) { // 根据不同状态处理 }); return promise2; }这里有几个关键点参数可选处理当onFulfilled或onRejected不是函数时提供默认实现总是返回新的Promise实例这是链式调用的基础根据当前Promise的状态采取不同的处理策略3.2 状态处理与回调执行then方法需要处理三种可能的状态情况if (this.status FULFILLED) { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); } else if (this.status REJECTED) { setTimeout(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); } else { // PENDING状态 this.onFulfilledCallbacks.push(() { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); this.onRejectedCallbacks.push(() { setTimeout(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); }关键实现细节使用setTimeout确保回调异步执行模拟微任务使用try-catch捕获回调执行中的错误pending状态时将回调存入数组等待状态改变后执行使用resolvePromise处理回调的返回值3.3 resolvePromise的实现resolvePromise函数是then方法的核心辅助函数它负责处理各种可能的返回值function resolvePromise(promise2, x, resolve, reject) { if (promise2 x) { return reject(new TypeError(循环引用)); } if (x instanceof MyPromise) { x.then(resolve, reject); } else if (x ! null (typeof x object || typeof x function)) { let called false; 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; reject(e); } } else { resolve(x); } }这个函数处理了以下几种情况防止循环引用promise2 x处理返回Promise实例的情况处理thenable对象有then方法的对象处理普通值注意事项called标志位是为了确保thenable对象的then方法只能调用resolve或reject一次这是Promise/A规范的要求。4. 其他实例方法与静态方法实现4.1 catch与finally方法catch和finally都是基于then方法的语法糖catch(onRejected) { return this.then(null, onRejected); } finally(callback) { return this.then( value MyPromise.resolve(callback()).then(() value), reason MyPromise.resolve(callback()).then(() { throw reason }) ); }finally的实现有几个关键点无论成功失败都会执行callback保持原Promise的值或原因如果callback返回Promise会等待它完成4.2 静态方法实现Promise的静态方法提供了便捷的创建和处理Promise的方式static resolve(value) { if (value instanceof MyPromise) return value; return new MyPromise(resolve resolve(value)); } static reject(reason) { return new MyPromise((_, reject) reject(reason)); } static all(promises) { return new MyPromise((resolve, reject) { const result []; let count 0; promises.forEach((p, i) { MyPromise.resolve(p).then(value { result[i] value; if (count promises.length) resolve(result); }, reject); }); if (promises.length 0) resolve(result); }); } static race(promises) { return new MyPromise((resolve, reject) { promises.forEach(p { MyPromise.resolve(p).then(resolve, reject); }); }); }all方法的实现要点返回的Promise在所有输入Promise完成时resolve保持结果的顺序与输入顺序一致任何一个Promise reject时立即rejectrace方法的实现要点第一个完成无论成功失败的Promise决定结果其他Promise的结果被忽略5. 常见问题与调试技巧5.1 异步执行顺序问题在实现Promise时最容易出错的就是回调的执行顺序。根据Promise/A规范then方法的回调必须异步执行多个then回调的执行顺序应该按照注册顺序测试用例const p new MyPromise(resolve resolve(done)); p.then(value console.log(第一个then)); console.log(同步代码); // 正确输出顺序 // 同步代码 // 第一个then5.2 值穿透问题值穿透是指当then的参数不是函数时值应该直接传递到下一个thenMyPromise.resolve(foo) .then(不是函数) .then(value console.log(value)); // 应该输出foo5.3 循环引用检测Promise实现必须检测并拒绝循环引用const p1 new MyPromise(resolve { const p2 new MyPromise(res res(p1)); resolve(p2); }); p1.then(() {}, reason console.log(reason)); // 应该输出TypeError5.4 调试技巧在关键位置添加console.log跟踪状态变化和回调执行使用Promise测试套件验证实现是否符合规范特别注意边界情况空数组、null值、非Promise的thenable对象等6. Promise实现的核心要点总结通过这个手写Promise的过程我们可以总结出几个核心要点状态管理Promise是一个状态机状态一旦改变就不可逆转异步执行所有回调必须异步执行确保执行顺序的一致性链式调用then方法总是返回新的Promise实现链式调用值处理需要正确处理各种返回值普通值、Promise、thenable错误处理同步错误和异步错误都需要被捕获并传递在实际项目中理解这些原理有助于我们更好地使用Promise处理各种复杂的异步场景。虽然现代JavaScript已经提供了async/await语法糖但Promise仍然是其底层实现机制深入理解Promise对提升异步编程能力至关重要。最后分享一个我在实现过程中遇到的坑最初我没有正确处理thenable对象导致某些特殊情况下Promise行为不符合预期。后来通过仔细阅读规范并添加专门的测试用例才发现了这个问题。这提醒我们在实现复杂功能时完善的测试用例和规范文档是多么重要。