当前位置：首页 > news >正文

JavaScript篇：async/await 错误处理指南：优雅捕获异常，告别失控的 Promise！

news 来源：原创 2025/5/11 10:16:14

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

1. 最基础的方式：try/catch

🌰 举个栗子：请求用户数据

2. 进阶技巧：让每个 Promise 自己处理错误

🌰 举个栗子：同时请求用户和订单数据

3. 终极方案：封装一个安全的 await 函数

🌰 举个栗子：safeAwait 实现

4. 错误边界：全局捕获未处理的 Promise 错误

🌰 举个栗子：全局错误监听

5. 总结

🚀 最佳实践建议

大家好，我是前端开发工程师小杨。今天咱们聊聊 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`	减少重复代码	统一错误处理，代码更简洁	需要额外封装
全局错误监听	兜底未捕获的错误	防止页面崩溃	无法针对性处理