技术学院

JS Promise源码_手写Promise实现

作者:夜晨2025-11-15 00:00:00

答案：手写实现Promise需掌握状态管理、异步执行、链式调用和错误传递，核心包括三种状态（pending、fulfilled、rejected）、then方法返回新Promise、resolvePromise处理返回值及catch、resolve、reject等静态方法。

实现一个符合 Promise/A+ 规范的 Promise 并不复杂，但需要理解其核心机制：状态管理、异步执行、链式调用和错误传递。下面是一个简化但功能完整的 Promise 手写实现，帮助你深入理解其工作原理。

1. Promise 的三种状态

Promise 有三种状态：

pending：初始状态，未 fulfilled 或 rejected
fulfilled：成功状态，值已确定
rejected：失败状态，原因已确定

状态一旦从 pending 变为 fulfilled 或 rejected，就不能再改变。

2. 基本结构与状态管理

class MyPromise { constructor(executor) { this.status = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.status === 'pending') { this.status = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.status === 'pending') { this.status = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { // 处理可选参数 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val; onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; }; let promise2; if (this.status === 'fulfilled') { return promise2 = new MyPromise((resolve, reject) => { setTimeout(() => { try { let x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); } if (this.status === 'rejected') { return promise2 = new MyPromise((resolve, reject) => { setTimeout(() => { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); } if (this.status === 'pending') { return promise2 = new MyPromise((resolve, reject) => { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { let x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); }); } } }

3. 处理 then 返回值（resolvePromise）

then 方法返回一个新的 Promise，必须根据回调的返回值决定新 Promise 的状态。这是 Promise/A+ 规范的核心逻辑。

4. 添加 catch 和静态方法

catch 是 then 的语法糖，只处理错误；resolve 和 reject 提供快速创建已决议的 Promise。

MyPromise.prototype.catch = function(onRejected) { return this.then(null, onRejected); }; MyPromise.resolve = function(value) { return new MyPromise(resolve => resolve(value)); }; MyPromise.reject = function(reason) { return new MyPromise((resolve, reject) => reject(reason)); }; // 可选：实现 all 方法 MyPromise.all = function(promises) { return new MyPromise((resolve, reject) => { let result = []; let count = 0; if (promises.length === 0) return resolve(result); for (let i = 0; i { result[i] = val;

if (++count === promises.length) resolve(result); }, err => reject(err) ); } }); };

基本上就这些。这个手写版本涵盖了 Promise 的核心机制：状态控制、异步任务队列、链式调用和值穿透。虽然省略了一些边界处理，但它能正确运行大多数常见场景，适合学习和面试使用。

上一篇丨

如何解决Notepad++ HTML代码格式化问题的处理方法

下一篇丨

如何解决在线编辑HTML时字体渲染问题的解决办法