手写 Promise 代码拆分成核心常量定义、类核心结构、实例方法、静态方法、辅助函数5 个核心模块逐个模块拆解逻辑让你清晰理解每一部分的作用和实现原理。完整代码后面直接copy一、核心常量定义基础准备// 定义Promise的三个状态常量不可变 const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected;讲解作用定义 Promise 的三个核心状态用常量而非直接写字符串避免拼写错误同时体现 “状态不可变” 的特性规范要求。状态规则PENDING初始状态异步操作未完成FULFILLED异步成功状态一旦变为该值永久不变REJECTED异步失败状态一旦变为该值永久不变。二、MyPromise 类核心结构构造函数构造函数是 Promise 的 “心脏”负责初始化状态、处理执行器函数、定义resolve/reject核心方法。class MyPromise { /** * 构造函数 * param {Function} executor 执行器函数立即执行接收resolve和reject参数 */ constructor(executor) { try { // 初始化状态、成功值、失败原因 this.status PENDING; this.value undefined; // 成功值保存fulfilled状态的结果 this.reason undefined; // 失败原因保存rejected状态的结果 // 缓存回调pending状态时保存then的回调函数状态改变后执行 this.onFulfilledCallbacks []; this.onRejectedCallbacks []; // 成功回调仅pending可执行修改状态保存值执行缓存的成功回调 const resolve (value) { // 处理resolve传入Promise/Thenable的情况比如resolve(另一个Promise) if (value instanceof MyPromise) { return value.then(resolve, reject); } // 状态不可变仅pending能修改为fulfilled if (this.status PENDING) { this.status FULFILLED; this.value value; // 异步执行所有缓存的成功回调状态改变后触发then绑定的回调 this.onFulfilledCallbacks.forEach((cb) setTimeout(cb)); } }; // 失败回调仅pending可执行修改状态保存原因执行缓存的失败回调 const reject (reason) { // 状态不可变仅pending能修改为rejected if (this.status PENDING) { this.status REJECTED; this.reason reason; // 异步执行所有缓存的失败回调 this.onRejectedCallbacks.forEach((cb) setTimeout(cb)); } }; // 立即执行执行器函数Promise的核心特性executor同步执行 executor(resolve, reject); } catch (error) { // 执行器执行出错直接调用reject比如executor里抛错 reject(error); } } // 其他方法then/catch/finally/静态方法放在这里... }关键细节讲解1. 初始化属性this.status当前 Promise 的状态初始为PENDINGthis.value/this.reason分别保存成功 / 失败的结果仅在状态改变时赋值this.onFulfilledCallbacks/this.onRejectedCallbacks回调缓存数组解决 “Promise 未敲定pending时调用 then回调需要等待状态改变后执行” 的问题比如异步操作还没完成就调用了 then。2. resolve 方法核心逻辑仅当状态为PENDING时生效修改状态为FULFILLED保存成功值执行缓存的成功回调特殊处理如果 resolve 的参数是另一个 MyPromise 实例会递归调用其 then 方法等待该 Promise 敲定后再决定当前 Promise 的状态符合规范resolve(Promise)会等待这个 Promise 完成异步执行回调用setTimeout包裹回调执行模拟原生 Promise 的 “微任务异步执行” 特性规范要求then 的回调必须异步执行即使 Promise 已敲定。3. reject 方法核心逻辑仅当状态为PENDING时生效修改状态为REJECTED保存失败原因执行缓存的失败回调无特殊值处理reject 的参数不会像 resolve 那样解析 Promise原生 Promise 也是如此reject(Promise)会直接把 Promise 作为失败原因。4. 执行器函数 executor立即执行new Promise 时executor 会同步执行比如new Promise((res) {console.log(1)})会立即输出 1错误捕获用 try/catch 包裹若 executor 执行过程中抛错比如new Promise(() {throw new Error()})直接调用 reject符合原生 Promise 的错误处理逻辑。三、实例方法then/catch/finally实例方法是 Promise “链式调用” 的核心所有实例方法都返回新 Promise实现异步逻辑的链式解耦。1. then 方法核心/** * 实例方法then * param {Function} onFulfilled 兑现回调 * param {Function} onRejected 拒绝回调 * returns {MyPromise} 返回新的Promise支持链式调用 */ then(onFulfilled, onRejected) { // 处理回调不传的情况透传值/原因实现值传递/错误冒泡 onFulfilled typeof onFulfilled function ? onFulfilled : (v) v; onRejected typeof onRejected function ? onRejected : (r) { throw r; }; // 拒绝回调不传抛出错误继续冒泡 // 返回新Promise实现链式调用新Promise的状态由回调执行结果决定 const newPromise new MyPromise((resolve, reject) { // 封装执行回调的函数处理回调执行结果 const executeCallback (callback, result) { try { const res callback(result); // 解析回调返回值如果是Promise/Thenable等待其执行完成 resolvePromise(newPromise, res, resolve, reject); } catch (error) { // 回调执行出错新Promise拒绝 reject(error); } }; // 状态为fulfilled异步执行兑现回调 if (this.status FULFILLED) { setTimeout(() { executeCallback(onFulfilled, this.value); }); } // 状态为rejected异步执行拒绝回调 if (this.status REJECTED) { setTimeout(() { executeCallback(onRejected, this.reason); }); } // 状态为pending缓存回调函数状态改变后执行 if (this.status PENDING) { this.onFulfilledCallbacks.push(() { executeCallback(onFulfilled, this.value); }); this.onRejectedCallbacks.push(() { executeCallback(onRejected, this.reason); }); } }); return newPromise; }关键讲解回调默认值处理若 onFulfilled 不传比如promise.then()默认返回原值(v) v实现 “值透传”若 onRejected 不传比如promise.then(fn)默认抛出错误(r) {throw r}实现 “错误冒泡”链式调用中错误会一直传到 catch。返回新 Promisethen 方法必须返回新 Promise这是链式调用的核心原生 Promise 的 then 也不返回 this而是新实例。分状态处理已敲定fulfilled/rejected异步执行对应回调未敲定pending把回调缓存到数组等待状态改变后执行。executeCallback 封装统一处理回调执行、错误捕获、返回值解析避免重复代码。resolvePromise 调用解析回调的返回值比如返回 Promise/Thenable保证新 Promise 的状态由回调结果决定核心规范。2. catch 方法语法糖/** * 实例方法catch * 等价于then(null, onRejected)专门处理拒绝状态 * param {Function} onRejected 拒绝回调 * returns {MyPromise} */ catch(onRejected) { return this.then(null, onRejected); }关键讲解本质catch 是 then 的语法糖简化 “只处理错误” 的场景链式特性因为 then 返回新 Promise所以 catch 也返回新 Promise支持继续链式调用比如promise.catch().then()。3. finally 方法语法糖/** * 实例方法finally * 无论成功/失败都会执行不改变上一个Promise的结果返回新Promise * param {Function} onFinally 最终回调 * returns {MyPromise} */ finally(onFinally) { return this.then( (value) MyPromise.resolve(onFinally()).then(() value), (reason) MyPromise.resolve(onFinally()).then(() { throw reason; }) ); }关键讲解核心特性无论 Promise 成功 / 失败finally 的回调都会执行不改变原 Promise 的结果成功仍返回原值失败仍抛出原错误实现逻辑成功时执行 onFinally等待其完成若 onFinally 返回 Promise需等待然后返回原值失败时执行 onFinally等待其完成然后抛出原错误MyPromise.resolve 包装处理 onFinally 返回 Promise 的情况比如finally(() new Promise(res setTimeout(res, 100)))保证 finally 等待回调完成后再传递结果。四、静态方法resolve/reject/all/race静态方法挂载在类上无需实例化即可调用用于快速创建 Promise 或处理多个 Promise。1. resolve 方法/** * 静态方法resolve * 返回一个以指定值兑现的MyPromise * param {any} value 兑现值可是普通值/MyPromise/Thenable * returns {MyPromise} */ static resolve(value) { if (value instanceof MyPromise) return value; return new MyPromise((resolve) resolve(value)); }关键讲解特性快速创建一个 “已兑现” 的 Promise特殊处理若参数是 MyPromise 实例直接返回该实例避免重复包装使用场景比如MyPromise.resolve(1)等价于new MyPromise(res res(1))。2. reject 方法/** * 静态方法reject * 返回一个以指定原因拒绝的MyPromise * param {any} reason 拒绝原因 * returns {MyPromise} */ static reject(reason) { return new MyPromise((_, reject) reject(reason)); }关键讲解特性快速创建一个 “已拒绝” 的 Promise与 resolve 的区别reject 不会解析参数比如MyPromise.reject(另一个Promise)会直接把这个 Promise 作为失败原因而不是等待其完成。3. all 方法/** * 静态方法all * 所有Promise兑现则兑现返回值数组任意一个拒绝则立即拒绝 * param {Iterable} promises 可迭代对象如数组 * returns {MyPromise} */ static all(promises) { return new MyPromise((resolve, reject) { if (!isIterable(promises)) { return reject(new TypeError(${promises} is not iterable)); } const arr Array.from(promises); const result []; // 保存所有成功值 let count 0; // 记录已兑现的Promise数量 // 遍历所有Promise arr.forEach((p, index) { MyPromise.resolve(p).then( (value) { result[index] value; // 按原顺序保存结果核心顺序不变 count; // 所有Promise都兑现才resolve if (count arr.length) resolve(result); }, (reason) { // 任意一个拒绝立即reject reject(reason); } ); }); // 空可迭代对象直接兑现空数组 if (arr.length 0) resolve(result); }); }关键讲解核心规则入参是 “可迭代对象”数组、Set 等非可迭代则抛错所有 Promise 兑现返回按原顺序排列的结果数组任意一个拒绝立即返回拒绝状态原因是第一个拒绝的 Promise 的原因细节处理MyPromise.resolve(p)统一处理 “非 Promise 值”比如all([1, new Promise(res res(2))])1 会被包装为兑现的 Promiseresult[index] value保证结果数组的顺序与入参顺序一致即使某个 Promise 后完成也会放在对应位置空可迭代对象直接返回兑现的空数组符合原生 Promise 规范。4. race 方法/** * 静态方法race * 第一个敲定兑现/拒绝的Promise决定最终状态 * param {Iterable} promises 可迭代对象如数组 * returns {MyPromise} */ static race(promises) { return new MyPromise((resolve, reject) { if (!isIterable(promises)) { return reject(new TypeError(${promises} is not iterable)); } const arr Array.from(promises); // 遍历所有Promise第一个敲定的直接决定结果 arr.forEach((p) { MyPromise.resolve(p).then(resolve, reject); }); // 空可迭代对象永久pending符合规范 }); }关键讲解核心规则“竞速” 模式第一个完成无论成功 / 失败的 Promise 决定最终状态细节处理空可迭代对象返回的 Promise 永久处于 pending 状态原生 Promise 也是如此MyPromise.resolve(p)统一处理非 Promise 值比如race([1, new Promise(res setTimeout(res, 100))])会立即返回 1。五、辅助函数resolvePromise/isIterable辅助函数是实现 Promise 规范的关键处理 “返回值解析” 和 “可迭代判断”避免核心逻辑冗余。1. resolvePromise 方法/** * 辅助函数解析Promise/Thenable的返回值 * param {MyPromise} newPromise then返回的新Promise * param {any} x 回调执行的返回值 * param {Function} resolve 新Promise的resolve * param {Function} reject 新Promise的reject */ function resolvePromise(newPromise, x, resolve, reject) { // 禁止循环引用x不能是新Promise本身比如then(() newPromise) if (x newPromise) { return reject(new TypeError(Chaining cycle detected for promise)); } // x是MyPromise实例等待其执行完成 if (x instanceof MyPromise) { x.then(resolve, reject); } // x是对象/函数处理Thenable判断是否有then方法 else if (x ! null (typeof x object || typeof x function)) { let called false; // 防止then方法多次调用resolve/reject try { const then x.then; // 是Thenable调用then方法绑定resolve/reject if (typeof then function) { then.call( x, (y) { if (called) return; called true; resolvePromise(newPromise, y, resolve, reject); // 递归解析y }, (r) { if (called) return; called true; reject(r); } ); } else { // 不是Thenable直接兑现x resolve(x); } } catch (error) { if (called) return; called true; reject(error); } } // x是普通值直接兑现x else { resolve(x); } }关键讲解核心作用解析 then 回调的返回值保证新 Promise 的状态符合规范Promise/A 规范的核心要求核心逻辑循环引用检测若回调返回新 Promise 本身比如then(() newPromise)抛错避免死循环MyPromise 实例等待其完成用其结果决定新 Promise 的状态Thenable 对象有.then()方法的对象 / 函数比如{then: (res) res(1)}模拟 Promise 的 then 方法递归解析其结果普通值直接兑现called 标记防止 Thenable 的 then 方法多次调用 resolve/reject规范要求then 的回调只能执行一次。核心问题为什么需要 resolvePromise当你在 then 的回调中返回一个值时新 Promise 的状态由这个值决定若返回普通值数字 / 字符串 / 普通对象新 Promise 直接兑现这个值若返回另一个 Promise新 Promise 要等待这个 Promise 完成用它的结果作为自己的结果若返回Thenable 对象有.then()方法的对象要模拟 Promise 的 then 逻辑解析其最终结果若返回新 Promise 本身要抛错避免循环引用死循环。resolvePromise就是把这些规则封装成通用逻辑让 then 方法不用重复写这些判断。回调返回值类型新 Promise 的状态普通值123/abc兑现值为这个普通值另一个 MyPromise 实例等待该实例完成用其结果作为自己的结果Thenable 对象模拟 then 方法解析其最终结果新 Promise 本身拒绝原因是 “循环引用”抛出错误拒绝原因是抛出的错误2. isIterable 方法/** * 辅助函数判断是否为可迭代对象 * param {any} obj 待判断对象 * param {boolean} */ function isIterable(obj) { return ( obj ! null typeof obj[Symbol.iterator] function ); }关键讲解作用判断入参是否为 “可迭代对象”数组、Set、Map、字符串等符合原生 Promise.all/race 的入参要求判断依据ES6 中可迭代对象必须有Symbol.iterator方法且该方法是函数边界处理排除 nullnull 的 typeof 是 object避免误判。总结核心逻辑Promise 的本质是 “状态机”状态一旦从 pending 变为 fulfilled/rejected 就不可变通过缓存回调 异步执行实现链式调用链式调用关键then/catch/finally 都返回新 Promise新 Promise 的状态由回调执行结果决定resolvePromise 负责解析回调返回值规范遵循手写 Promise 的核心是符合 Promise/A 规范重点处理 “状态不可变、回调异步执行、Thenable 解析、错误冒泡” 四大特性。// 定义Promise的三个状态常量不可变 const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected; class MyPromise { /** * 构造函数 * param {Function} executor 执行器函数立即执行接收resolve和reject参数 */ constructor(executor) { try { // 初始化状态、成功值、失败原因 this.status PENDING; this.value undefined; // 成功值 this.reason undefined; // 失败原因 // 缓存回调pending状态时保存then的回调函数状态改变后执行 this.onFulfilledCallbacks []; this.onRejectedCallbacks []; // 成功回调仅pending可执行修改状态保存值执行缓存的成功回调 const resolve (value) { // 处理resolve传入Promise/Thenable的情况 if (value instanceof MyPromise) { return value.then(resolve, reject); } // 状态不可变仅pending能修改为fulfilled if (this.status PENDING) { this.status FULFILLED; this.value value; // 异步执行所有缓存的成功回调 this.onFulfilledCallbacks.forEach((cb) setTimeout(cb)); } }; // 失败回调仅pending可执行修改状态保存原因执行缓存的失败回调 const reject (reason) { // 状态不可变仅pending能修改为rejected if (this.status PENDING) { this.status REJECTED; this.reason reason; // 异步执行所有缓存的失败回调 this.onRejectedCallbacks.forEach((cb) setTimeout(cb)); } }; // 立即执行执行器函数 executor(resolve, reject); } catch (error) { // 执行器执行出错直接调用reject reject(error); } } /** * 实例方法then * param {Function} onFulfilled 兑现回调 * param {Function} onRejected 拒绝回调 * returns {MyPromise} 返回新的Promise支持链式调用 */ then(onFulfilled, onRejected) { // 处理回调不传的情况透传值/原因实现值传递/错误冒泡 onFulfilled typeof onFulfilled function ? onFulfilled : (v) v; onRejected typeof onRejected function ? onRejected : (r) { throw r; }; // 拒绝回调不传抛出错误继续冒泡 // 返回新Promise实现链式调用新Promise的状态由回调执行结果决定 const newPromise new MyPromise((resolve, reject) { // 封装执行回调的函数处理回调执行结果 const executeCallback (callback, result) { try { const res callback(result); // 解析回调返回值如果是Promise/Thenable等待其执行完成 resolvePromise(newPromise, res, resolve, reject); } catch (error) { // 回调执行出错新Promise拒绝 reject(error); } }; // 状态为fulfilled异步执行兑现回调 if (this.status FULFILLED) { setTimeout(() { executeCallback(onFulfilled, this.value); }); } // 状态为rejected异步执行拒绝回调 if (this.status REJECTED) { setTimeout(() { executeCallback(onRejected, this.reason); }); } // 状态为pending缓存回调函数状态改变后执行 if (this.status PENDING) { this.onFulfilledCallbacks.push(() { executeCallback(onFulfilled, this.value); }); this.onRejectedCallbacks.push(() { executeCallback(onRejected, this.reason); }); } }); return newPromise; } /** * 实例方法catch * 等价于then(null, onRejected)专门处理拒绝状态 * param {Function} onRejected 拒绝回调 * returns {MyPromise} */ catch(onRejected) { return this.then(null, onRejected); } /** * 实例方法finally * 无论成功/失败都会执行不改变上一个Promise的结果返回新Promise * param {Function} onFinally 最终回调 * returns {MyPromise} */ finally(onFinally) { return this.then( (value) MyPromise.resolve(onFinally()).then(() value), (reason) MyPromise.resolve(onFinally()).then(() { throw reason; }) ); } /** * 静态方法resolve * 返回一个以指定值兑现的MyPromise * param {any} value 兑现值可是普通值/MyPromise/Thenable * returns {MyPromise} */ static resolve(value) { if (value instanceof MyPromise) return value; return new MyPromise((resolve) resolve(value)); } /** * 静态方法reject * 返回一个以指定原因拒绝的MyPromise * param {any} reason 拒绝原因 * returns {MyPromise} */ static reject(reason) { return new MyPromise((_, reject) reject(reason)); } /** * 静态方法all * 所有Promise兑现则兑现返回值数组任意一个拒绝则立即拒绝 * param {Iterable} promises 可迭代对象如数组 * returns {MyPromise} */ static all(promises) { return new MyPromise((resolve, reject) { if (!isIterable(promises)) { return reject(new TypeError(${promises} is not iterable)); } const arr Array.from(promises); const result []; // 保存所有成功值 let count 0; // 记录已兑现的Promise数量 // 遍历所有Promise arr.forEach((p, index) { MyPromise.resolve(p).then( (value) { result[index] value; count; // 所有Promise都兑现才resolve if (count arr.length) resolve(result); }, (reason) { // 任意一个拒绝立即reject reject(reason); } ); }); // 空可迭代对象直接兑现空数组 if (arr.length 0) resolve(result); }); } /** * 静态方法race * 第一个敲定兑现/拒绝的Promise决定最终状态 * param {Iterable} promises 可迭代对象如数组 * returns {MyPromise} */ static race(promises) { return new MyPromise((resolve, reject) { if (!isIterable(promises)) { return reject(new TypeError(${promises} is not iterable)); } const arr Array.from(promises); // 遍历所有Promise第一个敲定的直接决定结果 arr.forEach((p) { MyPromise.resolve(p).then(resolve, reject); }); // 空可迭代对象永久pending符合规范 }); } } /** * 辅助函数解析Promise/Thenable的返回值 * param {MyPromise} newPromise then返回的新Promise * param {any} x 回调执行的返回值 * param {Function} resolve 新Promise的resolve * param {Function} reject 新Promise的reject */ function resolvePromise(newPromise, x, resolve, reject) { // 禁止循环引用x不能是新Promise本身 if (x newPromise) { return reject(new TypeError(Chaining cycle detected for promise)); } // x是MyPromise实例等待其执行完成 if (x instanceof MyPromise) { x.then(resolve, reject); } // x是对象/函数处理Thenable判断是否有then方法 else if (x ! null (typeof x object || typeof x function)) { let called false; // 防止then方法多次调用resolve/reject try { const then x.then; // 是Thenable调用then方法绑定resolve/reject if (typeof then function) { then.call( x, (y) { if (called) return; called true; resolvePromise(newPromise, y, resolve, reject); // 递归解析y }, (r) { if (called) return; called true; reject(r); } ); } else { // 不是Thenable直接兑现x resolve(x); } } catch (error) { if (called) return; called true; reject(error); } } // x是普通值直接兑现x else { resolve(x); } } /** * 辅助函数判断是否为可迭代对象 * param {any} obj 待判断对象 * returns {boolean} */ function isIterable(obj) { return ( obj ! null typeof obj[Symbol.iterator] function ); } // 测试代码 if (typeof module ! undefined) { module.exports MyPromise; }