深入解析 Promise 核心原理，从零手写实现到实战应用

1. Promise 基础概念与使用场景1.1 什么是 Promise想象你点了一份外卖商家给你一个取餐号而不是立即给你食物。这个取餐号就是 Promise它代表一个未来才会完成的操作外卖送达。在 JavaScript 中Promise 是处理异步操作的标准化方案比传统的回调函数更优雅。Promise 有三种状态pending外卖还在路上fulfilled外卖已送达rejected外卖送餐失败状态一旦改变就不可逆就像取餐号被使用后就会作废。这是 Promise 的核心特性——承诺的结果不会被外界改变。1.2 为什么需要 Promise传统回调方式的典型问题// 回调地狱示例 getUser(userId, function(user) { getOrders(user.id, function(orders) { getItems(orders[0].id, function(items) { // 更多嵌套... }); }); });Promise 解决了链式调用像流水线一样组织异步操作统一错误处理用 catch 捕获整个链条的错误状态明确每个操作都有明确的状态标识1.3 基础 API 速查表方法说明示例new Promise()创建 Promisenew Promise((resolve, reject) {...}).then()处理成功/失败promise.then(v {}, e {}).catch()捕获错误promise.catch(e {})Promise.resolve()创建成功 PromisePromise.resolve(数据)Promise.reject()创建失败 PromisePromise.reject(错误)Promise.all()等待所有成功Promise.all([p1, p2])Promise.race()竞速第一个结果Promise.race([p1, p2])2. 手写 Promise 核心实现2.1 骨架搭建我们先搭建基础结构class MyPromise { constructor(executor) { this.state pending; // 状态 this.value undefined; // 结果值 this.callbacks []; // 回调队列 const resolve (value) { if (this.state ! pending) return; this.state fulfilled; this.value value; this.callbacks.forEach(cb cb.onFulfilled(value)); }; const reject (reason) { if (this.state ! pending) return; this.state rejected; this.value reason; this.callbacks.forEach(cb cb.onRejected(reason)); }; try { executor(resolve, reject); } catch (e) { reject(e); } } then(onFulfilled, onRejected) { // 待实现 } }2.2 then 方法实现.then()是 Promise 最复杂的方法需要处理状态立即变更的情况异步回调的队列处理链式调用的值传递then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) { const handleCallback (callback) { try { const result callback(this.value); if (result instanceof MyPromise) { result.then(resolve, reject); } else { resolve(result); } } catch (e) { reject(e); } }; if (this.state fulfilled) { setTimeout(() handleCallback(onFulfilled)); } else if (this.state rejected) { setTimeout(() handleCallback(onRejected)); } else { this.callbacks.push({ onFulfilled: () handleCallback(onFulfilled), onRejected: () handleCallback(onRejected) }); } }); }2.3 静态方法实现2.3.1 Promise.resolvestatic resolve(value) { return new MyPromise((resolve) { if (value instanceof MyPromise) { value.then(resolve); } else { resolve(value); } }); }2.3.2 Promise.allstatic all(promises) { return new MyPromise((resolve, reject) { const results []; let completed 0; promises.forEach((promise, index) { MyPromise.resolve(promise).then( value { results[index] value; if (completed promises.length) { resolve(results); } }, reject ); }); }); }3. 实战应用技巧3.1 错误处理最佳实践反模式// 错误示例忽略错误处理 fetchData().then(data { process(data); });推荐方案// 方案1统一catch fetchData() .then(process) .catch(error { console.error(处理失败:, error); return fallbackData; // 提供降级数据 }); // 方案2async/await async function handleData() { try { const data await fetchData(); return process(data); } catch (error) { sentry.captureException(error); throw new Error(处理失败, { cause: error }); } }3.2 性能优化技巧并行请求// 顺序请求慢 async function sequential() { const user await fetchUser(); const orders await fetchOrders(user.id); // 等待用户数据 } // 并行请求快 async function parallel() { const [user, orders] await Promise.all([ fetchUser(), fetchOrders() // 不依赖用户ID ]); }超时控制function withTimeout(promise, timeout) { return Promise.race([ promise, new Promise((_, reject) setTimeout(() reject(new Error(超时)), timeout) ) ]); }4. 常见问题解析4.1 为什么 then 返回新 Promise这是链式调用的基础。每次调用.then()都创建一个新 Promise使得我们可以连续调用fetchData() .then(parseJSON) // 返回新Promise .then(validateData) // 在上一个then的Promise上调用 .then(saveToDB); // 继续链式调用4.2 微任务与事件循环Promise 回调属于微任务microtask比宏任务setTimeout等优先级更高console.log(开始); setTimeout(() console.log(宏任务), 0); Promise.resolve() .then(() console.log(微任务1)) .then(() console.log(微任务2)); console.log(结束); // 输出顺序 // 开始 → 结束 → 微任务1 → 微任务2 → 宏任务4.3 async/await 本质async 函数只是 Promise 的语法糖async function example() { return 42; } // 等价于 function example() { return Promise.resolve(42); }await 会暂停 async 函数执行直到 Promise 完成async function fetchUser() { // 等效于 then 链式调用 const response await fetch(/user); const data await response.json(); return data; }5. 高级应用模式5.1 取消 Promise 的方案原生 Promise 无法取消但可以通过包装实现function cancellable(promise) { let isCancelled false; const wrapped new Promise((resolve, reject) { promise.then( value !isCancelled resolve(value), error !isCancelled reject(error) ); }); return { promise: wrapped, cancel: () { isCancelled true; } }; } // 使用示例 const { promise, cancel } cancellable(fetchData()); cancel(); // 取消请求5.2 进度通知扩展 Promise 实现进度回调class ProgressPromise extends Promise { constructor(executor) { super((resolve, reject) { executor( resolve, reject, progress { if (this.onProgress) this.onProgress(progress); } ); }); } progress(callback) { this.onProgress callback; return this; } } // 使用示例 new ProgressPromise((resolve, reject, progress) { let percent 0; const timer setInterval(() { percent 10; progress(percent); if (percent 100) { clearInterval(timer); resolve(); } }, 300); }) .progress(p console.log(${p}%)) .then(() console.log(完成));6. 浏览器与 Node.js 差异6.1 未处理 rejection浏览器会触发unhandledrejection事件window.addEventListener(unhandledrejection, event { console.warn(未处理的拒绝:, event.reason); });Node.js需要监听unhandledRejectionprocess.on(unhandledRejection, (reason, promise) { console.error(未处理的拒绝:, reason); });6.2 性能注意事项内存泄漏长时间挂起的 Promise 会保持引用堆栈追踪async 函数错误堆栈包含异步边界Promise 数量避免同时创建数百万个 Promise7. 测试与调试技巧7.1 单元测试策略使用 Jest 测试 Promise 的要点// 测试成功状态 test(resolves with data, () { return fetchData().then(data { expect(data).toBeDefined(); }); }); // 测试异步错误 test(rejects on error, async () { await expect(failedRequest()).rejects.toThrow(Network error); }); // 测试并行操作 test(executes in parallel, async () { const [a, b] await Promise.all([taskA(), taskB()]); expect(a b).toBe(42); });7.2 Chrome 调试技巧异步堆栈追踪启用 Async stack tracesPromise 断点在Promise.then回调中打断点控制台检查// 查看 Promise 状态 const p fetchData(); console.log(p); // 立即查看状态 await p; // 等待后查看结果8. 生态工具推荐8.1 实用工具库Bluebird高性能 Promise 库const Promise require(bluebird); Promise.config({ cancellation: true });p-retry自动重试失败操作const pRetry require(p-retry); await pRetry(() fetchData(), { retries: 3 });p-limit并发控制const limit require(p-limit)(3); await Promise.all(urls.map(url limit(() fetch(url)) ));8.2 现代 API 适配fetch APIasync function safeFetch(url) { const response await fetch(url); if (!response.ok) { throw new Error(HTTP ${response.status}); } return response.json(); }文件系统 Promise 化const fs require(fs).promises; async function readFiles() { const [a, b] await Promise.all([ fs.readFile(a.txt), fs.readFile(b.txt) ]); return a b; }9. 性能对比与优化9.1 不同实现对比方案优点缺点原生 Promise标准兼容功能较少Bluebird性能好功能多体积较大async/await代码清晰错误堆栈复杂回调函数无额外开销回调地狱9.2 内存优化技巧避免闭包累积// 不好每个then都保持data引用 fetchData().then(data { processData(data); // data被长期持有 }); // 更好及时释放引用 fetchData().then(data { const result processData(data); return result; // 原始data可被GC });批量处理// 不好大量并行Promise await Promise.all(users.map(u updateUser(u))); // 更好分批处理 const batchSize 100; for (let i 0; i users.length; i batchSize) { const batch users.slice(i, i batchSize); await Promise.all(batch.map(u updateUser(u))); }10. 手写 Promise 完整实现以下是符合 Promise/A 规范的完整实现class MyPromise { constructor(executor) { this.state pending; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; const resolve (value) { if (this.state ! pending) return; if (value instanceof MyPromise) { return value.then(resolve, reject); } this.state fulfilled; this.value value; this.onFulfilledCallbacks.forEach(fn fn()); }; const reject (reason) { if (this.state ! pending) return; this.state rejected; this.reason reason; this.onRejectedCallbacks.forEach(fn fn()); }; try { executor(resolve, reject); } catch (e) { reject(e); } } then(onFulfilled, onRejected) { onFulfilled typeof onFulfilled function ? onFulfilled : v v; onRejected typeof onRejected function ? onRejected : e { throw e }; const promise2 new MyPromise((resolve, reject) { const handleFulfilled () { queueMicrotask(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }; const handleRejected () { queueMicrotask(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }; if (this.state fulfilled) { handleFulfilled(); } else if (this.state rejected) { handleRejected(); } else { this.onFulfilledCallbacks.push(handleFulfilled); this.onRejectedCallbacks.push(handleRejected); } }); return promise2; } catch(onRejected) { return this.then(null, onRejected); } finally(callback) { return this.then( value MyPromise.resolve(callback()).then(() value), reason MyPromise.resolve(callback()).then(() { throw reason }) ); } static resolve(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; promises.forEach((promise, i) { MyPromise.resolve(promise).then( value { results[i] value; if (count promises.length) resolve(results); }, reject ); }); }); } static race(promises) { return new MyPromise((resolve, reject) { promises.forEach(promise { MyPromise.resolve(promise).then(resolve, reject); }); }); } } function resolvePromise(promise2, x, resolve, reject) { if (promise2 x) { return reject(new TypeError(循环引用)); } if (x instanceof MyPromise) { x.then( y resolvePromise(promise2, y, resolve, reject), reject ); } else if (x ! null (typeof x object || typeof x function)) { let then; try { then x.then; } catch (e) { return reject(e); } if (typeof then function) { let called false; try { then.call( x, y { if (called) return; called true; resolvePromise(promise2, y, resolve, reject); }, r { if (called) return; called true; reject(r); } ); } catch (e) { if (called) return; reject(e); } } else { resolve(x); } } else { resolve(x); } }在实际项目中建议优先使用原生 Promise。手写实现主要为了深入理解原理原生实现经过充分优化且兼容性更好。当遇到需要特殊功能如取消、进度通知时可以考虑扩展原生 Promise 或使用专业库。