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' 来做类型判断,再针对性处理。
立即学习“Java免费学习笔记(深入)”;
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 错误










