前端白屏警告！async/await 错误不处理，老板让我卷铺盖！

大家好，我是小墨，射手座，三十多年从未打过架，斗地主逃跑率99% 。代码写得比字多，bug 修得比头发快 ，秉持“能跑就是好代码”的哲学 ‍。日常和前端打交道，代码写得比注释多，希望和大家多多交流！🤝

前端开发中的一个“隐形杀手”—— async/await 的错误处理。

async/await让异步代码像同步代码一样简洁优雅，但很多人却忽略了它背后暗藏的“玄机”。如果错误处理不当，你的页面可能分分钟“罢工”，变成一片空白！

为了让大家对async/await的错误处理有一个整体的认识，小墨特意绘制了一个流程图：

从流程图中我们可以看到，async/await的错误处理有多种选择，每种选择都有其适用的场景。

错误处理：async/await

为什么async/await的错误处理这么重要？

JavaScript 中的异步操作（比如网络请求、文件读取等）结果是不确定的。如果操作成功，皆大欢喜；但如果失败了（比如网络中断、服务器出错），就会抛出错误。

如果不捕获并处理这些错误，程序就会像脱缰的野马一样，轻则功能失灵，重则直接崩溃，给用户留下“这程序真烂”的印象。

4 种姿势，搞定 async/await 错误处理

1.try/catch：一把梭，全拿下

try/catch是 JavaScript 的经典错误处理机制，它可以捕获代码块中的任何错误，包括同步错误和异步错误。在async/await中，try/catch同样适用，而且非常强大。

小墨提示：

•try块里只放可能出错的代码，不要把所有代码都塞进去。

•catch块里根据错误类型做不同的处理，比如网络错误、数据解析错误等。

• 如果需要在错误发生后做一些清理工作（比如关闭连接、释放资源），可以用finally块，它里面的代码无论是否出错都会执行。

2..catch()：链式处理，更优雅

如果你不想在async函数内部使用try/catch，可以在调用async函数时，利用 Promise 的.catch()方法来捕获错误。这种方式更符合函数式编程的思想，代码也更简洁。

小墨提示：

• 这种方式适合处理多个异步操作的错误，可以将错误处理逻辑集中在一起。

• 记得一定要调用.catch()，否则错误会被忽略！

3. await 后直接 .catch()：短平快

还有一种更“偷懒”的写法，直接在await表达式后面加上.catch()，专门捕获这个await操作的错误。

小墨提示：

• 这种方式非常简洁，适合处理单个await表达式的错误。

• 可以在错误发生时立即处理，避免错误“扩散”。

4. 全局捕获：最后的防线

最后这种方式不常见，但适合作为程序的最后一道保障，防止一些异常被"吃掉"，导致程序意外崩溃。

注意：

这种全局捕获的方式要慎用，因为它可能会掩盖一些潜在的问题。主要用来保证程序的异常不会被"吃掉"。

总结

async/await的错误处理，没有绝对的“最佳实践”，只有最适合你的场景和习惯的方法。

•try/catch：经典、全面，适合大多数情况。

•.catch()：链式调用，适合处理多个异步操作。

•await后直接.catch()：简洁、快速，适合处理单个await表达式。

•全局捕获： 保证程序发生异常情况不会崩溃。

错误处理就是async/await的“地基”，只有把错误处理好了，你的代码才能更健壮，更能经受住各种考验！

如果觉得内容不错，欢迎点赞、分享、推荐！一起交流前端开发！