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

大家好，我是江城开朗的豌豆，一名拥有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	减少重复代码	统一错误处理，代码更简洁	需要额外封装
全局错误监听	兜底未捕获的错误	防止页面崩溃	无法针对性处理

---

🚀 最佳实践建议

1. 简单场景用 try/catch

2. 并行任务用 Promise.catch 独立处理

3. 复杂项目封装 safeAwait 工具函数

4. 生产环境加全局错误监听

现在你学会了吗？下次写 async/await 时，记得优雅地处理错误！

你在错误处理上踩过什么坑？欢迎评论区分享！ 👇