实现一个符合 promises/A+ 规范的 Promise 需遵循状态不可变、异步执行、链式调用等规则,核心包括三种状态(pending、fulfilled、rejected)、then 方法返回新 Promise、resolvePromise 处理返回值、catch 和 finally 的语法糖实现,以及静态 resolve 和 reject 方法,完整覆盖规范关键机制。

实现一个符合 Promises/A+ 规范的 Promise 并不只是写个简单的异步容器,而是要严格遵循状态机制、异步解析和链式调用等核心规则。下面是一个精简但完全符合 Promises/A+ 规范核心逻辑的手写 Promise 实现,包含关键特性:状态管理、then 链式调用、值穿透、错误捕获以及异步执行。
Promise 的三种状态
Promise 有三个状态:
- pending:初始状态,未完成也未拒绝
- fulfilled:操作成功完成
- rejected:操作失败
状态一旦从 pending 变为 fulfilled 或 rejected,就不能再改变。
基本结构与状态控制
function MyPromise(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 (error) { reject(error); } }
构造函数接收一个执行器函数(executor),立即执行,并传入 resolve 和 reject 函数。通过闭包维护状态和回调队列。
立即学习“Java免费学习笔记(深入)”;
实现 then 方法
then 方法是 Promise 的核心,必须返回一个新的 Promise,以支持链式调用。
MyPromise.prototype.then = function(onFulfilled, onRejected) { // 处理透传值,默认函数 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val; onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; }; 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); } if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } 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; };
注意使用 setTimeout 模拟异步微任务(实际规范中应使用 queueMicrotask,但 setTimeout 在浏览器中可模拟异步行为)。
处理返回值 resolvePromise
这个函数决定如何处理 then 回调的返回值 x,是 Promises/A+ 最复杂的一部分。
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); } }
该函数判断 x 是否为 Promise 或类 Promise 对象(有 then 方法),递归解析直到得到最终值。
补充方法:catch 和 finally
catch 是 then 的语法糖,只处理错误。
MyPromise.prototype.catch = function(onRejected) { return this.then(null, onRejected); }; MyPromise.prototype.finally = function(callback) { return this.then( value => MyPromise.resolve(callback()).then(() => value), reason => MyPromise.resolve(callback()).then(() => { throw reason; }) ); };
finally 不影响结果值,无论成功或失败都会执行 callback。
静态方法:resolve 和 reject
MyPromise.resolve = function(value) { return new MyPromise(resolve => resolve(value)); }; MyPromise.reject = function(reason) { return new MyPromise((_, reject) => reject(reason)); };
基本上就这些。这个手写 Promise 覆盖了 Promises/A+ 的主要规范点:状态不可逆、then 返回新 Promise、异步执行、错误捕获、链式解析。虽然没有覆盖所有边界测试,但已足够理解其核心机制。在真实项目中推荐使用原生 Promise,但在面试或学习时,这种实现能深刻掌握异步编程原理。


