async函数自动返回Promise,await在async内暂停执行等待Promise完成;多任务需据依赖关系选Promise.all(并行)或链式await(串行),并合理处理错误。

async 和 await 是 JavaScript 中处理异步操作的语法糖,本质基于 Promise,让异步代码写起来像同步一样清晰。关键不是“要不要用”,而是“怎么用对”——尤其在多个异步任务并行或串行时,容易误用 await 导致性能下降。
async 函数:让函数自动返回 Promise
只要在函数声明前加 async,该函数就一定会返回一个 Promise。即使 return 一个普通值,也会被自动包装成 Promise.resolve(value)。
示例:
async function fetchData() {return "done";
}
console.log(fetchData()); // Promise { 'done' }
await:只能在 async 函数内暂停等待 Promise 完成
await 后面必须是一个 Promise(或可转为 Promise 的值),它会暂停当前 async 函数的执行,直到 Promise settled(fulfilled 或 rejected),然后继续往下走。
立即学习“Java免费学习笔记(深入)”;
注意:
• await 不会阻塞整个线程,只是暂停当前 async 函数;
• 如果 await 的 Promise 被 reject,且没被 try/catch 捕获,会直接让当前 async 函数返回 rejected Promise。
常见写法:
async function loadUser() {try {
const res = await fetch('/api/user');
const user = await res.json();
return user;
} catch (err) {
console.error('加载失败', err);
}
}
多个异步任务:并行 vs 串行,别傻等
错误做法:连续 await → 实际是串行,每个等完才发起下一个,耗时叠加。
正确策略取决于需求:
-
需要全部完成,且不依赖顺序 → 用
Promise.all()并行发起:
const [user, posts, comments] = await Promise.all([
fetch('/api/user').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
fetch('/api/comments').then(r => r.json())
]);
return { user, posts, comments };
}
✅ 快:3 个请求同时发出,总耗时 ≈ 最慢那个。
❌ 缺点:任一失败,整个 Promise.all() 就 reject。
-
想忽略个别失败,拿到所有结果(包括失败) → 用
Promise.allSettled():
fetch('/api/user'),
fetch('/api/timeout'), // 假设超时
fetch('/api/posts')
]);
// results 是数组,每项有 status: 'fulfilled' | 'rejected'
- 必须按顺序执行,且后一步依赖前一步结果 → 才用链式 await:
const token = await login();
const profile = await fetch('/api/profile', {
headers: { Authorization: `Bearer ${token}` }
}).then(r => r.json());
const settings = await fetch(`/api/settings?uid=${profile.id}`).then(r => r.json());
return { profile, settings };
}
错误处理:别只靠顶层 try/catch
await 失败会抛出异常,但不同场景要不同处理:
- 单个关键请求失败不能继续 → 用 try/catch 包裹那个 await;
- 某个非关键请求失败可降级 → 用
.catch(() => defaultValue)或await Promise.resolve().catch(...); - 多个并行请求中只想捕获特定错误 → 先用
Promise.allSettled,再遍历检查状态。
小技巧:封装一个安全 await 工具函数:
async function safeAwait(promise) {try {
const res = await promise;
return [null, res];
} catch (err) {
return [err, null];
}
}
// 使用:
const [err, data] = await safeAwait(fetch('/api/test'));
核心就三点:async 让函数变 Promise 生产者,await 让等待变直观,而多个任务的关键在于分清“是否需等待彼此”——该并行别串行,该容错别崩盘。











