1. Promise 实现的核心原理Promise 是现代 JavaScript 异步编程的基石理解其实现原理对于深入掌握异步流程控制至关重要。Promise 本质上是一个状态机包含三种状态pending等待中、fulfilled已成功和 rejected已失败。状态一旦改变就不可逆转这种特性保证了异步操作结果的确定性。1.1 状态机设计实现 Promise 首先要构建状态转换机制。在 ES6 规范中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); } } }这个基础框架实现了 Promise 最核心的状态管理功能。当 executor 函数中调用 resolve 或 reject 时状态会从 pending 转变为相应状态并触发存储的回调函数。关键点状态转换是不可逆的这就是为什么在 resolve 和 reject 函数中都要检查当前状态是否为 pending。1.2 微任务队列机制Promise 的回调执行采用微任务microtask机制这使其优先级高于常规的宏任务macrotask。在浏览器环境中我们通常用 queueMicrotask 或 MutationObserver 实现微任务队列而在 Node.js 环境中可以使用 process.nextTick。function asyncExecute(callback) { if (typeof queueMicrotask function) { queueMicrotask(callback); } else if (typeof process object process.nextTick) { process.nextTick(callback); } else { setTimeout(callback, 0); } }微任务机制保证了 then 方法回调的执行时机符合规范即在当前事件循环的末尾、下一个事件循环开始前执行。这是 Promise 能够实现优雅异步流程控制的关键。2. then 方法的完整实现then 方法是 Promise 的核心接口它允许我们链式调用多个异步操作。一个完整的 then 方法实现需要考虑多种边界情况。2.1 基础 then 实现then(onFulfilled, onRejected) { const promise2 new MyPromise((resolve, reject) { const handleFulfilled () { try { if (typeof onFulfilled ! function) { resolve(this.value); } else { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } } catch (err) { reject(err); } }; const handleRejected () { try { if (typeof onRejected ! function) { reject(this.reason); } else { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } } catch (err) { reject(err); } }; if (this.state fulfilled) { asyncExecute(handleFulfilled); } else if (this.state rejected) { asyncExecute(handleRejected); } else { this.onFulfilledCallbacks.push(() asyncExecute(handleFulfilled)); this.onRejectedCallbacks.push(() asyncExecute(handleRejected)); } }); return promise2; }这个实现处理了三种状态情况并确保回调总是异步执行。特别注意对 onFulfilled 和 onRejected 的类型检查当它们不是函数时实现值穿透。2.2 resolvePromise 实现resolvePromise 函数用于处理 then 方法返回值的解析这是 Promise 实现中最复杂的部分之一function resolvePromise(promise2, x, resolve, reject) { if (promise2 x) { return reject(new TypeError(Chaining cycle detected for promise)); } let called false; if ((typeof x object x ! null) || 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/A 规范中关于 thenable 对象的所有处理规则包括防止循环引用、确保只调用一次 resolve/reject 等关键特性。3. 其他 Promise 方法的实现3.1 catch 和 finally 方法catch 方法实际上是 then 方法的语法糖catch(onRejected) { return this.then(null, onRejected); }finally 方法则无论成功失败都会执行回调但会保留原始 Promise 的值或原因finally(callback) { return this.then( value MyPromise.resolve(callback()).then(() value), reason MyPromise.resolve(callback()).then(() { throw reason; }) ); }3.2 静态方法实现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 results []; let count 0; const processResult (index, value) { results[index] value; if (count promises.length) { resolve(results); } }; promises.forEach((promise, index) { MyPromise.resolve(promise).then( value processResult(index, value), reject ); }); }); } static race(promises) { return new MyPromise((resolve, reject) { promises.forEach(promise { MyPromise.resolve(promise).then(resolve, reject); }); }); }这些静态方法扩展了 Promise 的实用性all 方法等待所有 Promise 完成race 方法则取最先完成的 Promise 结果。4. 常见问题与解决方案4.1 未捕获的 Promise 错误uncaught (in promise) error 是常见的 Promise 使用问题。在我们的实现中可以通过添加全局错误捕获机制来改善static setUncaughtExceptionHandler(handler) { process.on(unhandledRejection, handler); // 或者在浏览器中: window.addEventListener(unhandledrejection, handler); }4.2 Promise 内存泄漏长时间挂起的 Promise 可能导致内存泄漏。解决方法包括为 Promise 添加超时机制使用 AbortController 取消长时间运行的异步操作避免在 Promise 中保存不必要的引用static withTimeout(promise, timeout) { return new MyPromise((resolve, reject) { const timer setTimeout(() { reject(new Error(Promise timeout)); }, timeout); promise.then( value { clearTimeout(timer); resolve(value); }, err { clearTimeout(timer); reject(err); } ); }); }4.3 Promise 性能优化大量 Promise 同时执行可能导致性能问题。解决方案包括实现 Promise 池控制并发数量使用 async/await 优化执行流程避免不必要的 Promise 包装static pool(tasks, concurrency) { return new MyPromise((resolve) { const results []; let running 0; let index 0; const runNext () { while (running concurrency index tasks.length) { const current index; running; tasks[current]().then(result { results[current] result; running--; runNext(); }); } if (running 0 index tasks.length) { resolve(results); } }; runNext(); }); }5. Promise 高级应用场景5.1 取消 Promise 操作原生 Promise 不支持取消操作但我们可以通过包装实现class CancelablePromise { constructor(executor) { this.promise new MyPromise((resolve, reject) { executor( value this.isCancelled ? reject({ isCancelled: true }) : resolve(value), reason this.isCancelled ? reject({ isCancelled: true }) : reject(reason) ); }); this.isCancelled false; } cancel() { this.isCancelled true; } then(onFulfilled, onRejected) { return this.promise.then(onFulfilled, onRejected); } }5.2 Promise 进度通知标准 Promise 不提供进度通知但可以通过扩展实现class ProgressPromise { constructor(executor) { this.progressHandlers []; this.promise new MyPromise((resolve, reject) { executor( resolve, reject, progress { this.progressHandlers.forEach(handler handler(progress)); } ); }); } progress(handler) { this.progressHandlers.push(handler); return this; } then(onFulfilled, onRejected) { return this.promise.then(onFulfilled, onRejected); } }5.3 Promise 与 Generator 结合Promise 与 Generator 结合可以实现更优雅的异步流程控制function asyncFlow(generatorFunction) { return function(...args) { const generator generatorFunction(...args); function handle(result) { if (result.done) return MyPromise.resolve(result.value); return MyPromise.resolve(result.value) .then(res handle(generator.next(res))) .catch(err handle(generator.throw(err))); } try { return handle(generator.next()); } catch (err) { return MyPromise.reject(err); } }; }这个模式实际上是 async/await 的底层实现原理通过它我们可以理解更高级的异步语法糖是如何工作的。 
长河君 · 2026/8/13 4:26:51 · 阅读 1.2k 深入解析Promise核心原理与实现
1. Promise 实现的核心原理Promise 是现代 JavaScript 异步编程的基石理解其实现原理对于深入掌握异步流程控制至关重要。Promise 本质上是一个状态机包含三种状态pending等待中、fulfilled已成功和 rejected已失败。状态一旦改变就不可逆转这种特性保证了异步操作结果的确定性。1.1 状态机设计实现 Promise 首先要构建状态转换机制。在 ES6 规范中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); } } }这个基础框架实现了 Promise 最核心的状态管理功能。当 executor 函数中调用 resolve 或 reject 时状态会从 pending 转变为相应状态并触发存储的回调函数。关键点状态转换是不可逆的这就是为什么在 resolve 和 reject 函数中都要检查当前状态是否为 pending。1.2 微任务队列机制Promise 的回调执行采用微任务microtask机制这使其优先级高于常规的宏任务macrotask。在浏览器环境中我们通常用 queueMicrotask 或 MutationObserver 实现微任务队列而在 Node.js 环境中可以使用 process.nextTick。function asyncExecute(callback) { if (typeof queueMicrotask function) { queueMicrotask(callback); } else if (typeof process object process.nextTick) { process.nextTick(callback); } else { setTimeout(callback, 0); } }微任务机制保证了 then 方法回调的执行时机符合规范即在当前事件循环的末尾、下一个事件循环开始前执行。这是 Promise 能够实现优雅异步流程控制的关键。2. then 方法的完整实现then 方法是 Promise 的核心接口它允许我们链式调用多个异步操作。一个完整的 then 方法实现需要考虑多种边界情况。2.1 基础 then 实现then(onFulfilled, onRejected) { const promise2 new MyPromise((resolve, reject) { const handleFulfilled () { try { if (typeof onFulfilled ! function) { resolve(this.value); } else { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } } catch (err) { reject(err); } }; const handleRejected () { try { if (typeof onRejected ! function) { reject(this.reason); } else { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } } catch (err) { reject(err); } }; if (this.state fulfilled) { asyncExecute(handleFulfilled); } else if (this.state rejected) { asyncExecute(handleRejected); } else { this.onFulfilledCallbacks.push(() asyncExecute(handleFulfilled)); this.onRejectedCallbacks.push(() asyncExecute(handleRejected)); } }); return promise2; }这个实现处理了三种状态情况并确保回调总是异步执行。特别注意对 onFulfilled 和 onRejected 的类型检查当它们不是函数时实现值穿透。2.2 resolvePromise 实现resolvePromise 函数用于处理 then 方法返回值的解析这是 Promise 实现中最复杂的部分之一function resolvePromise(promise2, x, resolve, reject) { if (promise2 x) { return reject(new TypeError(Chaining cycle detected for promise)); } let called false; if ((typeof x object x ! null) || 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/A 规范中关于 thenable 对象的所有处理规则包括防止循环引用、确保只调用一次 resolve/reject 等关键特性。3. 其他 Promise 方法的实现3.1 catch 和 finally 方法catch 方法实际上是 then 方法的语法糖catch(onRejected) { return this.then(null, onRejected); }finally 方法则无论成功失败都会执行回调但会保留原始 Promise 的值或原因finally(callback) { return this.then( value MyPromise.resolve(callback()).then(() value), reason MyPromise.resolve(callback()).then(() { throw reason; }) ); }3.2 静态方法实现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 results []; let count 0; const processResult (index, value) { results[index] value; if (count promises.length) { resolve(results); } }; promises.forEach((promise, index) { MyPromise.resolve(promise).then( value processResult(index, value), reject ); }); }); } static race(promises) { return new MyPromise((resolve, reject) { promises.forEach(promise { MyPromise.resolve(promise).then(resolve, reject); }); }); }这些静态方法扩展了 Promise 的实用性all 方法等待所有 Promise 完成race 方法则取最先完成的 Promise 结果。4. 常见问题与解决方案4.1 未捕获的 Promise 错误uncaught (in promise) error 是常见的 Promise 使用问题。在我们的实现中可以通过添加全局错误捕获机制来改善static setUncaughtExceptionHandler(handler) { process.on(unhandledRejection, handler); // 或者在浏览器中: window.addEventListener(unhandledrejection, handler); }4.2 Promise 内存泄漏长时间挂起的 Promise 可能导致内存泄漏。解决方法包括为 Promise 添加超时机制使用 AbortController 取消长时间运行的异步操作避免在 Promise 中保存不必要的引用static withTimeout(promise, timeout) { return new MyPromise((resolve, reject) { const timer setTimeout(() { reject(new Error(Promise timeout)); }, timeout); promise.then( value { clearTimeout(timer); resolve(value); }, err { clearTimeout(timer); reject(err); } ); }); }4.3 Promise 性能优化大量 Promise 同时执行可能导致性能问题。解决方案包括实现 Promise 池控制并发数量使用 async/await 优化执行流程避免不必要的 Promise 包装static pool(tasks, concurrency) { return new MyPromise((resolve) { const results []; let running 0; let index 0; const runNext () { while (running concurrency index tasks.length) { const current index; running; tasks[current]().then(result { results[current] result; running--; runNext(); }); } if (running 0 index tasks.length) { resolve(results); } }; runNext(); }); }5. Promise 高级应用场景5.1 取消 Promise 操作原生 Promise 不支持取消操作但我们可以通过包装实现class CancelablePromise { constructor(executor) { this.promise new MyPromise((resolve, reject) { executor( value this.isCancelled ? reject({ isCancelled: true }) : resolve(value), reason this.isCancelled ? reject({ isCancelled: true }) : reject(reason) ); }); this.isCancelled false; } cancel() { this.isCancelled true; } then(onFulfilled, onRejected) { return this.promise.then(onFulfilled, onRejected); } }5.2 Promise 进度通知标准 Promise 不提供进度通知但可以通过扩展实现class ProgressPromise { constructor(executor) { this.progressHandlers []; this.promise new MyPromise((resolve, reject) { executor( resolve, reject, progress { this.progressHandlers.forEach(handler handler(progress)); } ); }); } progress(handler) { this.progressHandlers.push(handler); return this; } then(onFulfilled, onRejected) { return this.promise.then(onFulfilled, onRejected); } }5.3 Promise 与 Generator 结合Promise 与 Generator 结合可以实现更优雅的异步流程控制function asyncFlow(generatorFunction) { return function(...args) { const generator generatorFunction(...args); function handle(result) { if (result.done) return MyPromise.resolve(result.value); return MyPromise.resolve(result.value) .then(res handle(generator.next(res))) .catch(err handle(generator.throw(err))); } try { return handle(generator.next()); } catch (err) { return MyPromise.reject(err); } }; }这个模式实际上是 async/await 的底层实现原理通过它我们可以理解更高级的异步语法糖是如何工作的。