JavaScript Promise 速查表 - Promise 异步编程与 async/await 大全

这张速查给在浏览器(fetch)或 Node 里写异步代码的 JS 开发者。内容从创建与消费 Promise 讲起,再讲 all、race、allSettled、any 这几个初学者最容易搞混的静态组合方法,接着是链式调用及其上的 async/await 语法糖。后面的章节覆盖真实场景:并发发起大量请求而不打爆连接、用超时等待最快结果、对不稳定请求做重试,以及用 AbortController 中止正在进行的 fetch。读完你应能按顺序编排异步步骤、给并行任务加上并发热度上限,并为易失败的调用补上超时与重试。

编程语言·共 36 条命令·最后更新 2026-07-21
promise异步asyncjavascript

基础用法 5

new Promise((resolve, reject) => { resolve(value) })
创建并立即成功
new Promise((resolve, reject) => { reject(new Error("fail")) })
创建并立即失败
Promise.resolve(value)
把任意值包装成已完成的 Promise,常用于把同步值转异步
Promise.reject(reason)
直接得到已失败(已拒绝)的 Promise,测试或快速失败用
new Promise((resolve) => setTimeout(resolve, 1000, "ok"))
延时 1 秒后带着 "ok" 成功,模拟耗时操作或加等待

消费 Promise 5

promise.then((result) => {})
成功时执行的回调,参数是 Promise 的完成值
promise.catch((error) => {})
失败时执行的回调,负责处理拒绝原因
promise.finally(() => {})
成功或失败都会执行,适合关 loading、清理资源
promise.then(onFulfilled, onRejected)
一次指定成功与失败两个回调,等价于 then + catch
promise.then((v) => v + 1)
回调返回的值会被自动包装成新 Promise 继续传递

静态方法 5

Promise.all([p1, p2])
全部成功才成功,任一失败即失败
Promise.race([p1, p2])
第一个完成(无论成败)的结果
Promise.allSettled([p1, p2])
等待全部完成,返回每个结果状态
Promise.any([p1, p2])
第一个成功的,全部失败才失败
Promise.allSettled 结果项为 { status, value } 或 { status, reason }
结果对象结构

链式调用 4

fetch(url).then((r) => r.json()).then((data) => {})
链式处理响应
promise.then(() => nextPromise())
返回新 Promise 串联异步
promise.then((v) => v + 1).then((v) => console.log(v))
返回值向下游传递
promise.catch((err) => fallback()).then((v) => {})
错误恢复后继续链式

async/await 5

async function fn() { return value }
async 函数自动返回 Promise
const result = await promise
等待 Promise 完成
try { await promise } catch (err) {}
用 try/catch 捕获拒绝
await Promise.all([p1, p2])
并发等待多个任务
const [a, b] = await Promise.all([fa(), fb()])
并发并解构结果

进阶模式 6

for (const item of items) { await process(item) }
串行执行(逐个等待)
await Promise.all(items.map((i) => fetch(i)))
并发执行全部任务
async function pool(tasks, limit) {}
限制最大并发数
Promise.race([task(), timeout(5000)])
超时控制(5 秒)
async function retry(fn, times = 3) {}
失败自动重试
async function sleep(ms) { return new Promise((r) => setTimeout(r, ms)) }
延时工具函数

取消与工具 6

const ac = new AbortController(); ac.abort()
创建并触发中止信号
fetch(url, { signal: ac.signal })
fetch 关联中止信号
ac.signal.addEventListener("abort", () => {})
监听中止事件
AbortSignal.timeout(3000)
3 秒后自动中止
queueMicrotask(() => {})
把回调加入微任务队列
const d = {}; d.promise = new Promise((r, j) => { d.resolve = r; d.reject = j })
deferred 模式(外部控制 resolve)

提示

  • Promise 三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败),状态不可逆。
  • then 返回新 Promise,链式调用中返回值会自动包装并传给下一个 then。
  • catch 等同于 then(null, onRejected),能捕获链上任意位置的拒绝。
  • Promise.all 适合全部必须成功;allSettled 适合需要全部结果;race 取最快;any 取首个成功。
  • async/await 是 Promise 的语法糖,用 try/catch 处理错误更直观。

官方参考来源

下方为命令对应的官方权威文档,供你核对最新用法与深入查阅。

由 巧匠 维护

公开更新于 2026年7月21日,内容持续校对官方文档。

联系我们

命令或描述有误?提交反馈、商务合作或产品建议都可发送邮件给我们。

联系我们