当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript错误处理及trycatch使用详解

JavaScript错误处理及trycatch使用详解

2026-01-01 11:37:06 0浏览收藏

基本语法结构

try...catch 由三部分组成：可能出错的代码块（try）、捕获并处理错误的块（catch），以及可选的无论是否出错都会执行的清理代码（finally）。

try 块：把可能抛出错误的语句放在这里，比如调用不存在的方法、解析非法 JSON、访问 undefined 的属性等。
catch 块：当 try 中抛出错误时，会跳转到这里，参数（通常叫 error 或 err）包含错误对象，含 message、name、stack 等属性。
finally 块（可选）：总会执行，适合关闭连接、重置状态、释放资源等收尾操作。

常见使用场景示例

比如从 API 获取数据后解析 JSON：

try {
  const response = await fetch('/api/data');
  const data = await response.json(); // 如果返回非 JSON，这里会抛 SyntaxError
  console.log(data);
} catch (err) {
  console.error('解析失败：', err.message);
  console.error('错误类型：', err.name);
  // 可以显示用户友好的提示，或 fallback 到默认数据
} finally {
  // 隐藏加载动画、释放信号量等
}

再比如访问嵌套对象属性前做防护：

try {
  const userName = user.profile.info.name; // 若 user 或 profile 或 info 为 null/undefined，会报 TypeError
} catch (err) {
  if (err instanceof TypeError) {
    console.warn('用户信息不完整，使用默认名称');
    userName = '游客';
  }
}

进阶技巧：按错误类型分别处理

不是所有错误都该一视同仁。你可以用 instanceof 或检查 err.name 来区分错误种类：

ReferenceError：引用了未声明的变量
TypeError：操作了不支持类型的值（如调用 null 的方法）
SyntaxError：JSON.parse 解析失败、eval 语法错误等
NetworkError / AbortError：fetch 请求被拒绝或超时（需配合 signal）

也可以手动抛出自定义错误，让 catch 更有针对性：

if (!input || input.trim() === '') {
  throw new Error('输入不能为空');
}
// …后续逻辑
} catch (err) {
  if (err.message === '输入不能为空') {
    alert('请填写内容后再提交');
  }
}

注意事项和最佳实践

避免把整个函数体包进一个大 try，否则难以定位具体哪一行出错。应尽量缩小 try 范围，只包裹真正可能出错的语句。

不要忽略 catch —— 至少要 console.error(err) 或上报错误日志，否则等于掩盖问题。
慎用空 catch{}，这会让错误完全消失，调试时无迹可寻。
异步代码中，try...catch 对回调函数内的错误无效（如 setTimeout(() => { throw new Error() })），需用 Promise.catch() 或 async/await + try/catch。
全局错误可用 window.onerror 或 window.addEventListener('error') 补充兜底，但无法捕获 Promise 拒绝，需额外监听 unhandledrejection。