答案：手写实现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+ 规范的核心逻辑。
function resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError(‘Chaining cycle detected for promise’)); } let called; if (x != null && (typeof x === ‘object’ || typeof x === ‘function’)) { try { let 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); }}
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 的核心机制：状态控制、异步任务队列、链式调用和值穿透。虽然省略了一些边界处理，但它能正确运行大多数常见场景，适合学习和面试使用。
以上就是JS Promise源码_手写Promise实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538938.html
微信扫一扫 
支付宝扫一扫 
