JS错误处理：trycatch使用技巧与实战

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JS错误处理：try catch使用详解》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript错误处理通过try...catch捕获运行时异常，try执行可能出错代码，catch接收error对象（含message和name），finally无论成败均执行清理操作；异步需用async/await配合才能用try...catch捕获Promise错误。

错误处理，就是当代码运行中出问题时，不让整个程序卡住或崩溃，而是有意识地捕获、识别并应对这些意外情况。JavaScript 的 try...catch 是最常用、最标准的错误处理机制。

try...catch 的基本结构和作用

它把可能出错的代码放进 try 块里“试探性执行”；一旦抛出异常（比如访问了未定义变量、解析非法 JSON），就会立刻中断 try 中剩余代码，并跳进 catch 块处理错误。

• try 块：放你怀疑会“翻车”的逻辑，例如调用外部 API、解析用户输入、操作 DOM 元素
• catch(error)：error 是一个对象，至少包含 message（错误描述）和 name（错误类型，如 TypeError）
• 不写 catch，错误会向上冒泡，最终由浏览器显示红字报错，页面功能可能中断

常见错误类型和怎么识别

JavaScript 运行时会根据问题性质抛出不同构造函数的错误实例，比如：

• ReferenceError：用了没声明的变量，如 console.log(username) 但 username 没定义
• TypeError：类型不对，比如对 null 调用 .map() 或给数字加字符串却期望是数值运算
• SyntaxError：代码写错了语法（如少括号、引号不配对），但这类错误通常在解析阶段就报错，无法被 try...catch 捕获
• RangeError：参数超限，比如创建长度为 -5 的数组 new Array(-5)
• URIError：encode/decode URI 时传入非法字符

你可以用 error.name === 'TypeError' 来做类型判断，再针对性处理。

finally 块的作用不能少

加上 finally，里面的代码无论成功还是出错都会执行，适合做清理工作：

• 关闭模态框、隐藏 loading 动画
• 释放定时器、取消未完成的 fetch 请求（配合 AbortController）
• 还原临时状态，比如把按钮从“提交中”切回“提交”

注意：即使 try 或 catch 里写了 return，finally 仍会先执行完才真正返回。

异步代码里的 try...catch 要小心

直接在 try 里写 fetch(...).then(...) 是捕获不到 Promise 拒绝的——因为错误发生在未来某个时刻，不在 try 同步执行流中。

• 正确做法：用 async/await，把异步操作“变同步感”，这样就能用 try...catch 包裹
• 示例：try { const res = await fetch('/api/user'); const data = await res.json(); } catch (err) { console.error('请求或解析失败', err); }
• 如果不用 async/await，就得靠 .catch() 链式处理 Promise 错误

好了，本文到此结束，带大家了解了《JS错误处理：trycatch使用技巧与实战》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！