使用 async/await 提升异步代码可读性,配合 try/catch 处理错误;通过 Promise.all 实现并发执行,避免串行等待;注意避免在循环中误用 await,推荐 for...of 替代 forEach;封装错误处理逻辑,统一返回 [error, data] 格式,提升代码健壮性。

异步编程是现代 JavaScript 开发的核心部分,尤其在处理网络请求、文件操作或定时任务时。写好异步代码不仅能提升性能,还能避免阻塞主线程和回调地狱。以下是当前推荐的最佳实践。
使用 async/await 替代传统 Promise 链
虽然 Promise 已经改善了回调结构,但 async/await 让异步代码看起来更像同步代码,可读性更强。
说明:函数前加上 async 会使其返回一个 Promise,内部可用 await 等待 Promise 完成。
建议:
立即学习“Java免费学习笔记(深入)”;
- 用 try/catch 捕获 await 中的错误,而不是 .catch()
- 避免在循环中无节制地 await,必要时考虑并行执行
示例:
async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) throw new Error('Network error');
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch failed:', error);
}
}
合理使用 Promise.all 和 Promise.allSettled
当需要并发执行多个异步任务时,应避免串行 await,充分利用并行能力。
说明:
- Promise.all:全部成功才成功,任一失败则整体失败
- Promise.allSettled:等待所有完成(无论成功或失败),适合非强依赖场景
建议:
立即学习“Java免费学习笔记(深入)”;
- 获取多个独立资源时用 Promise.all 提升效率
- 任务之间不相互影响时,用 allSettled 防止单个失败拖累整体
示例:
const results = await Promise.all([
fetch('/api/posts').then(r => r.json()),
fetch('/api/comments').then(r => r.json())
]);
避免隐藏的异步陷阱
async/await 写起来像同步,但本质仍是异步,容易引发误解。
常见问题与建议:
- 不要忘记 await —— 忘记会导致返回的是 Promise 而非结果
- 避免在 forEach 中使用 await,应改用 for...of
- 长时间运行的异步操作应提供取消机制(如 AbortController)
错误示例:
userIds.forEach(async id => {
await fetchUser(id); // forEach 不等待这个 await
});
正确做法:
for (const id of userIds) {
await fetchUser(id);
}
统一错误处理机制
分散的 try/catch 会让代码臃肿,建议封装通用处理逻辑。
建议:
立即学习“Java免费学习笔记(深入)”;
- 封装异步函数返回 [error, data] 格式,简化调用层判断
- 在顶层加全局异常监听(如 unhandledrejection)作为兜底
- 业务层根据错误类型做重试、提示或降级处理
封装示例:
function to(promise) {
return promise
.then(data => [null, data])
.catch(error => [error, null]);
}
// 使用
const [err, data] = await to(fetch('/api/data'));
基本上就这些。掌握 async/await、合理并发、规避常见坑、统一错误处理,就能写出清晰可靠的异步代码。不复杂但容易忽略细节。











