本文全面讲解 Promise创建、链式调用、组合、错误处理与常见陷阱是前端异步编程的核心标准。你是否想过如何表示一个暂时还不存在的值如何告别深层嵌套回调写出近乎同步写法的异步代码// 回调地狱 getUser(userId, function(user) { getPosts(user.id, function(posts) { getComments(posts[0].id, function(comments) { console.log(comments) }) }) }) // Promise 扁平写法 getUser(userId) .then(user getPosts(user.id)) .then(posts getComments(posts[0].id)) .then(comments console.log(comments))Promise是代表异步操作最终完成 / 失败的对象ES2015ES6标准化。你可以把它理解为餐厅取餐号—— 现在没食物但承诺做好后给你结果。本文你将学到Promise 是什么、为何诞生三种状态pending /fulfilled/rejected用构造函数创建 Promise使用.then()/.catch()/.finally()Promise 链式调用原理所有静态方法all /allSettled/race /any/resolve /reject/withResolvers /try常用模式与避坑指南前置知识回调函数Callback。一、什么是 PromisePromise 是一个代表异步操作最终结果的 JS 对象。它的含义我现在没有值但我保证之后给你结果或错误。// 1秒后决议的 Promise const promise new Promise((resolve, reject) { setTimeout(() { resolve(Hello from the future!) }, 1000) }) promise.then(value { console.log(value) // 1秒后输出 })与回调不同Promise 是返回的对象而非传入的函数。这让链式调用、组合、统一错误处理成为可能。二、餐厅取餐类比你下单 → 调用异步函数拿到取餐号 →得到 Promise 对象等待做菜 →pending进行中餐做好 →fulfilled成功食材用完 →rejected失败取餐 →.then()处理问题 →.catch()关键特性一旦落定settled状态永久不变。三、为什么需要 Promise回调的问题嵌套地狱金字塔代码错误处理分散、重复无法组合并行 / 串行流程同步 / 异步行为不一致Promise 提供扁平链式结构统一错误捕获强大的并发控制确定性异步行为四、Promise 三态与命运三种状态Statepending初始状态进行中fulfilled成功有结果值rejected失败有错误原因重要规则一旦从 pending → fulfilled /rejected状态永久锁定resolve()/reject()多次调用只生效第一次命运Fateresolved命运已锁定可能仍 pending但会跟随内部 Promiseunresolved未锁定五、Thenable 对象任何拥有.then()方法的对象都叫thenable。JS 会自动把它当作 Promise 兼容处理实现库间互操作。const thenable { then(onFulfilled) { onFulfilled(42) } } Promise.resolve(thenable).then(console.log) // 42六、创建 Promise1. 构造函数const p new Promise((resolve, reject) { // 同步立即执行 // 成功 → resolve(value) // 失败 → reject(error) })2. 包装回调式 APIfunction loadImage(url) { return new Promise((resolve, reject) { const img new Image() img.onload () resolve(img) img.onerror () reject(new Error(load failed)) img.src url }) }3. 快速创建Promise.resolve(值) Promise.reject(错误)七、消费 Promisethen /catch/finally1..then()核心方法接收成功回调返回新 Promise。2..catch()捕获链中任何错误等价于.then(undefined, err {})。3..finally()无论成功 / 失败都会执行用于清理关闭加载、释放资源。八、Promise 链式调用核心能力每一个.then()都返回新 Promise形成扁平流程。Promise.resolve(1) .then(x x 1) // 2 .then(x x 1) // 3 .then(console.log)规则返回普通值 → 作为下一个 then 的值返回 Promise → 等待它决议再继续抛出错误 → 进入最近 catch九、错误处理超级强大错误会自动穿透整条链直到被 catch一个 catch 捕获所有上游错误可 catch 后恢复流程getUser() .then(user getPosts(user.id)) .then(posts getComments(posts[0].id)) .catch(err console.error(任意一步出错:, err))十、Promise 静态方法必背1.Promise.all([])全部成功才成功任意失败立即失败短路并行执行等待全部2.Promise.allSettled([])永远不失败等待全部落定返回每个结果的状态与值3.Promise.race([])谁先落定谁赢成功失败都算结束常用于超时控制4.Promise.any([])谁先成功谁赢忽略失败全部失败才返回 AggregateError5.Promise.withResolvers()ES2024直接外部获取 resolve/reject更简洁。const { promise, resolve, reject } Promise.withResolvers()6.Promise.try()Baseline 2025统一处理同步 / 异步函数捕获同步抛出。十一、常用异步模式1. 串行执行依赖前序结果for...of await2. 并行执行互不依赖Promise.all3. 分批并行防限流slice 循环 Promise.all4. 重试机制循环 catch delay5. 回调转 PromisePromisify包装成 (resolve, reject) 形式十二、常见错误高频坑忘记 return→ 链断裂、undefined嵌套而非链式→ 重回回调地狱new Promise 包裹已有 Promise反模式没有 catch→ 未处理拒绝崩溃 / 警告forEach async→ 不等待直接继续微任务时序误解then 永远在同步代码之后十三、核心要点总结Promise 异步结果占位符三态pending → fulfilled /rejected一旦落定不可改变then 返回新 Promise → 支持链式错误自动穿透一个 catch 搞定并行 / 竞速 / 超时 / 重试都靠静态方法是 async/await 的基础概念 汇总一、核心基础Promise同类Future、Deferred、异步契约、Task异步占位值同类延迟计算、未来值Promise 状态pending/fulfilled/rejected同类异步生命周期、操作状态机落定settled同类决议、完成、结束二、语法与 APIthenable同类类 Promise 对象、鸭子类型Promise 链式调用同类流式调用、管道流程.then() / .catch() / .finally()同类回调处理器、完成钩子、清理函数三、静态组合方法Promise.all同类并行等待、全部成功、并发汇聚Promise.allSettled同类容忍失败并行、结果收集、批量状态Promise.race同类竞速、抢先完成、超时机制Promise.any同类优先成功、多源备选、最快可用Promise.withResolvers同类延迟决议、外部控制 PromisePromise.try同类统一同步异步、安全执行包裹四、模式与问题回调地狱同类嵌套金字塔、厄运金字塔Promise 构造反模式同类多余包装、冗余封装未处理 Promise 拒绝同类未捕获异常、崩溃隐患微任务时序同类事件循环、任务队列、宏任务 / 微任务五、上层抽象async/await同类Promise 语法糖、线性异步写法并行 / 串行 / 分批同类并发控制、任务调度、限流重试Retry同类容错、退避重试、故障自动恢复
JavaScript 异步（Promise）
发布时间：2026/5/16 20:49:18
本文全面讲解 Promise创建、链式调用、组合、错误处理与常见陷阱是前端异步编程的核心标准。你是否想过如何表示一个暂时还不存在的值如何告别深层嵌套回调写出近乎同步写法的异步代码// 回调地狱 getUser(userId, function(user) { getPosts(user.id, function(posts) { getComments(posts[0].id, function(comments) { console.log(comments) }) }) }) // Promise 扁平写法 getUser(userId) .then(user getPosts(user.id)) .then(posts getComments(posts[0].id)) .then(comments console.log(comments))Promise是代表异步操作最终完成 / 失败的对象ES2015ES6标准化。你可以把它理解为餐厅取餐号—— 现在没食物但承诺做好后给你结果。本文你将学到Promise 是什么、为何诞生三种状态pending /fulfilled/rejected用构造函数创建 Promise使用.then()/.catch()/.finally()Promise 链式调用原理所有静态方法all /allSettled/race /any/resolve /reject/withResolvers /try常用模式与避坑指南前置知识回调函数Callback。一、什么是 PromisePromise 是一个代表异步操作最终结果的 JS 对象。它的含义我现在没有值但我保证之后给你结果或错误。// 1秒后决议的 Promise const promise new Promise((resolve, reject) { setTimeout(() { resolve(Hello from the future!) }, 1000) }) promise.then(value { console.log(value) // 1秒后输出 })与回调不同Promise 是返回的对象而非传入的函数。这让链式调用、组合、统一错误处理成为可能。二、餐厅取餐类比你下单 → 调用异步函数拿到取餐号 →得到 Promise 对象等待做菜 →pending进行中餐做好 →fulfilled成功食材用完 →rejected失败取餐 →.then()处理问题 →.catch()关键特性一旦落定settled状态永久不变。三、为什么需要 Promise回调的问题嵌套地狱金字塔代码错误处理分散、重复无法组合并行 / 串行流程同步 / 异步行为不一致Promise 提供扁平链式结构统一错误捕获强大的并发控制确定性异步行为四、Promise 三态与命运三种状态Statepending初始状态进行中fulfilled成功有结果值rejected失败有错误原因重要规则一旦从 pending → fulfilled /rejected状态永久锁定resolve()/reject()多次调用只生效第一次命运Fateresolved命运已锁定可能仍 pending但会跟随内部 Promiseunresolved未锁定五、Thenable 对象任何拥有.then()方法的对象都叫thenable。JS 会自动把它当作 Promise 兼容处理实现库间互操作。const thenable { then(onFulfilled) { onFulfilled(42) } } Promise.resolve(thenable).then(console.log) // 42六、创建 Promise1. 构造函数const p new Promise((resolve, reject) { // 同步立即执行 // 成功 → resolve(value) // 失败 → reject(error) })2. 包装回调式 APIfunction loadImage(url) { return new Promise((resolve, reject) { const img new Image() img.onload () resolve(img) img.onerror () reject(new Error(load failed)) img.src url }) }3. 快速创建Promise.resolve(值) Promise.reject(错误)七、消费 Promisethen /catch/finally1..then()核心方法接收成功回调返回新 Promise。2..catch()捕获链中任何错误等价于.then(undefined, err {})。3..finally()无论成功 / 失败都会执行用于清理关闭加载、释放资源。八、Promise 链式调用核心能力每一个.then()都返回新 Promise形成扁平流程。Promise.resolve(1) .then(x x 1) // 2 .then(x x 1) // 3 .then(console.log)规则返回普通值 → 作为下一个 then 的值返回 Promise → 等待它决议再继续抛出错误 → 进入最近 catch九、错误处理超级强大错误会自动穿透整条链直到被 catch一个 catch 捕获所有上游错误可 catch 后恢复流程getUser() .then(user getPosts(user.id)) .then(posts getComments(posts[0].id)) .catch(err console.error(任意一步出错:, err))十、Promise 静态方法必背1.Promise.all([])全部成功才成功任意失败立即失败短路并行执行等待全部2.Promise.allSettled([])永远不失败等待全部落定返回每个结果的状态与值3.Promise.race([])谁先落定谁赢成功失败都算结束常用于超时控制4.Promise.any([])谁先成功谁赢忽略失败全部失败才返回 AggregateError5.Promise.withResolvers()ES2024直接外部获取 resolve/reject更简洁。const { promise, resolve, reject } Promise.withResolvers()6.Promise.try()Baseline 2025统一处理同步 / 异步函数捕获同步抛出。十一、常用异步模式1. 串行执行依赖前序结果for...of await2. 并行执行互不依赖Promise.all3. 分批并行防限流slice 循环 Promise.all4. 重试机制循环 catch delay5. 回调转 PromisePromisify包装成 (resolve, reject) 形式十二、常见错误高频坑忘记 return→ 链断裂、undefined嵌套而非链式→ 重回回调地狱new Promise 包裹已有 Promise反模式没有 catch→ 未处理拒绝崩溃 / 警告forEach async→ 不等待直接继续微任务时序误解then 永远在同步代码之后十三、核心要点总结Promise 异步结果占位符三态pending → fulfilled /rejected一旦落定不可改变then 返回新 Promise → 支持链式错误自动穿透一个 catch 搞定并行 / 竞速 / 超时 / 重试都靠静态方法是 async/await 的基础概念 汇总一、核心基础Promise同类Future、Deferred、异步契约、Task异步占位值同类延迟计算、未来值Promise 状态pending/fulfilled/rejected同类异步生命周期、操作状态机落定settled同类决议、完成、结束二、语法与 APIthenable同类类 Promise 对象、鸭子类型Promise 链式调用同类流式调用、管道流程.then() / .catch() / .finally()同类回调处理器、完成钩子、清理函数三、静态组合方法Promise.all同类并行等待、全部成功、并发汇聚Promise.allSettled同类容忍失败并行、结果收集、批量状态Promise.race同类竞速、抢先完成、超时机制Promise.any同类优先成功、多源备选、最快可用Promise.withResolvers同类延迟决议、外部控制 PromisePromise.try同类统一同步异步、安全执行包裹四、模式与问题回调地狱同类嵌套金字塔、厄运金字塔Promise 构造反模式同类多余包装、冗余封装未处理 Promise 拒绝同类未捕获异常、崩溃隐患微任务时序同类事件循环、任务队列、宏任务 / 微任务五、上层抽象async/await同类Promise 语法糖、线性异步写法并行 / 串行 / 分批同类并发控制、任务调度、限流重试Retry同类容错、退避重试、故障自动恢复
