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