大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。
我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。
大家好，我是前端开发工程师小明（代码里还是用 我 😆）。今天咱们聊聊 async/await 的错误处理，这是每个前端开发者必会的技能！
你是不是也遇到过这些情况？
await一个异步请求，结果报错了，页面直接崩了？try/catch写了一大堆，代码变得又臭又长？- 多个异步任务并行，其中一个报错，怎么优雅处理？
别担心，今天我就带你彻底掌握 async/await 的错误处理技巧，让你的代码既健壮又优雅！
1. 最基础的方式：try/catch
async/await 的本质是 Promise，所以可以用 try/catch 捕获错误。
🌰 举个栗子：请求用户数据
async function fetchUserData() {
try {
const response = await fetch('/api/user/我');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求失败:', error);
// 可以在这里做错误上报或 fallback 处理
}
}
fetchUserData();
优点：
✅ 代码清晰，错误集中处理
✅ 适合单个异步操作
缺点：
❌ 多个 await 时，catch 会捕获所有错误，难以区分
2. 进阶技巧：让每个 Promise 自己处理错误
如果多个异步任务并行，可以用 Promise.catch() 让每个任务独立处理错误。
🌰 举个栗子：同时请求用户和订单数据
async function fetchAllData() {
const userPromise = fetch('/api/user/我').catch(error => {
console.error('用户数据请求失败:', error);
return null; // 返回默认值，避免中断流程
});
const ordersPromise = fetch('/api/orders/我').catch(error => {
console.error('订单数据请求失败:', error);
return []; // 返回空数组，不影响后续逻辑
});
const [user, orders] = await Promise.all([userPromise, ordersPromise]);
console.log(user, orders);
}
fetchAllData();
优点：
✅ 每个请求单独处理错误，互不影响
✅ 可以返回 fallback 数据，保证代码继续执行
3. 终极方案：封装一个安全的 await 函数
如果你厌倦了到处写 try/catch，可以封装一个 safeAwait 工具函数：
🌰 举个栗子：safeAwait 实现
async function safeAwait(promise, fallback = null) {
try {
return await promise;
} catch (error) {
console.error('执行失败:', error);
return fallback; // 返回默认值
}
}
// 使用方式
async function fetchData() {
const user = await safeAwait(fetch('/api/user/我'), { name: '默认用户' });
const orders = await safeAwait(fetch('/api/orders/我'), []);
console.log(user, orders);
}
fetchData();
优点：
✅ 减少重复代码
✅ 统一错误处理逻辑
✅ 可定制 fallback 值
4. 错误边界：全局捕获未处理的 Promise 错误
即使写了 try/catch，有些错误还是可能漏掉，比如：
await外面的 Promise 报错- 异步回调里的错误
🌰 举个栗子：全局错误监听
// 浏览器环境
window.addEventListener('unhandledrejection', (event) => {
console.error('未捕获的 Promise 错误:', event.reason);
event.preventDefault(); // 阻止控制台报错
});
// Node.js 环境
process.on('unhandledRejection', (error) => {
console.error('未捕获的 Promise 错误:', error);
});
适用场景：
✔ 兜底未处理的错误
✔ 错误监控上报
5. 总结
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
try/catch | 单个异步操作 | 简单直接 | 多个 await 时代码臃肿 |
Promise.catch | 并行任务独立错误处理 | 错误隔离，不影响其他任务 | 需要手动处理每个 Promise |
safeAwait | 减少重复代码 | 统一错误处理，代码更简洁 | 需要额外封装 |
| 全局错误监听 | 兜底未捕获的错误 | 防止页面崩溃 | 无法针对性处理 |
🚀 最佳实践建议
- 简单场景用
try/catch - 并行任务用
Promise.catch独立处理 - 复杂项目封装
safeAwait工具函数 - 生产环境加全局错误监听
现在你学会了吗？下次写 async/await 时，记得优雅地处理错误！
你在错误处理上踩过什么坑？欢迎评论区分享！ 👇
