javascript错误处理怎么做_try...catch语句如何捕获异常？

JavaScript错误处理核心是try...catch语句，用于捕获并响应异常：try块放可能出错代码，catch块处理错误并接收错误对象；常用于外部数据解析、不确定属性访问、第三方API调用及本地存储操作；可通过err.name精准判断错误类型；finally块无论是否出错均执行，适用于清理工作。

JavaScript 错误处理的核心是 try...catch 语句，它能让你在代码出错时不直接崩溃，而是有控制地响应异常。

try...catch 基本结构怎么写？

语法很直接：把可能出错的代码放进 try 块，把出错后的处理逻辑放进 catch 块。如果 try 中抛出错误，执行会立即跳到 catch，并把错误对象传给参数（通常叫 error 或 err）。

示例：

try {
  JSON.parse('{ "name": "Alice", }'); // 多了个逗号，语法错误
} catch (err) {
  console.log('解析失败：', err.message); // 输出：Unexpected token } in JSON at position 25
}

什么时候该用 try...catch？

不是所有地方都要包一层 try...catch。重点用在以下场景：

• 外部数据解析：比如 JSON.parse()、XMLHttpRequest.responseXML、用户输入的日期字符串转 Date
• 访问可能不存在的对象属性：尤其当数据结构不确定时（如 API 返回字段缺失），可配合可选链 ?. 使用，但深层嵌套仍建议加 try
• 调用第三方库或浏览器 API：比如 navigator.geolocation.getCurrentPosition() 可能拒绝授权，触发 error 回调；但若封装成 Promise，就可用 catch 捕获
• 文件读取或 localStorage 操作：比如 localStorage.setItem() 在存储空间满时会抛出 QuotaExceededError

如何更精准地处理不同类型的错误？

原生 catch 不区分错误类型，但你可以通过检查 err.name 或 err.constructor.name 来判断：

try {
  nonExistentFunction();
} catch (err) {
  if (err.name === 'ReferenceError') {
    console.log('变量或函数未定义');
  } else if (err.name === 'TypeError') {
    console.log('类型不匹配，比如调用了非函数值');
  } else {
    console.log('其他错误：', err.message);
  }
}

注意：err instanceof TypeError 在跨 iframe 或模块边界时可能失效（因构造函数引用不同），所以优先用 err.name 更稳妥。

finally 有什么用？

finally 块无论是否出错都会执行，适合做清理工作：

• 关闭模态框、隐藏加载动画
• 重置表单状态或清空临时变量
• 释放资源（如手动终止定时器、取消未完成的 fetch 请求 —— 需配合 AbortController）

示例：

let loading = true;
try {
  await fetch('/api/data');
} catch (err) {
  console.error('请求失败', err);
} finally {
  loading = false; // 确保加载状态总能关闭
}

不复杂但容易忽略：别在 catch 里只写 console.log(err) 就完事，至少要记录关键信息，或给用户友好提示，否则问题很难被发现和定位。