async/await 本身不直接组合异步任务,而是通过 await 行为与 Promise 组合方法(如 Promise.all、Promise.race)配合实现顺序、并发、条件执行及错误隔离;需结合 try/catch、if 判断和封装工具函数提升可维护性。

async/await 本身不直接“组合”异步任务,而是提供一种清晰、同步风格的写法来顺序执行、并发执行或条件化协调多个 Promise。关键在于理解 await 的行为和 Promise 的组合能力(如 Promise.all、Promise.race、Promise.any 等),再配合 async 函数封装逻辑。
顺序执行:用 await 一个接一个等待
最直观的方式:在 async 函数中连续 await 多个 Promise,后一个等前一个完成后再开始,适合有依赖关系的任务。
例如:
async function fetchUserData() {const user = await fetch('/api/user').then(r => r.json());
const posts = await fetch(`/api/posts?userId=${user.id}`).then(r => r.json());
const comments = await fetch(`/api/comments?postId=${posts[0]?.id}`).then(r => r.json());
return { user, posts, comments };
}
并发执行:用 Promise.all + await 同时发起多个请求
当任务彼此独立、无需等待前序结果时,应避免串行 await,改用 Promise.all 并发发起,再 await 整体结果,显著提升性能。
例如:
async function loadDashboard() {const [user, posts, notifications] = await Promise.all([
fetch('/api/user').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
fetch('/api/notifications').then(r => r.json())
]);
return { user, posts, notifications };
}
注意:Promise.all 会因任一 Promise 拒绝而整体失败;如需“尽力而为”,可用 Promise.allSettled。
条件分支与错误隔离:结合 try/catch 和独立 await
某些任务需根据前一步结果决定是否执行,或希望某个失败不影响其他流程,可将 await 放在独立 try/catch 块中,或用 if 判断控制流。
- 用 try/catch 分离错误处理,避免单点失败中断整个函数
- 用 if 或 switch 根据上一步返回值决定下一步操作
- 对非关键任务(如埋点上报)可单独 await 并忽略其错误
组合复杂逻辑:封装成可复用的 async 工具函数
把常见模式提取为函数,让组合更清晰。例如:
// 等待多个任务,任一成功即返回async function raceFirst(...promises) {
return Promise.race(promises);
}
// 保底 fallback:主请求失败时用备用源
async function withFallback(primary, fallback) {
try { return await primary; }
catch { return await fallback; }
}
这样调用时语义明确:const data = await withFallback(fetch('/main'), fetch('/backup'));

















