17370845950

JavaScript错误捕获主要通过try...catch结合throw和finally实现，用于处理运行时异常。1. try...catch捕获同步错误，catch接收error对象；2. throw主动抛出异常，推荐使用Error实例；3. finally无论是否出错都执行，适合资源清理；4. 异步中Promise用.catch()，async/await用try...catch包裹await；5. 全局监听window.error和unhandledrejection事件捕获未处理异常，便于日志上报。合理使用可提升程序健壮性和用户体验。

JavaScript 中的错误捕获主要依靠 try...catch 语句，同时结合 throw 和 finally 块来实现完整的异常处理机制。合理使用这些语法结构，可以有效防止程序因未处理的错误而崩溃，并提升用户体验。

try...catch 基本语法

try...catch 用于捕获代码块中可能发生的运行时错误。

try {
   // 可能出错的代码
} catch (error) {
   // 捕获并处理错误
}

如果 try 块中的代码抛出异常，控制权会立即转移到 catch 块。catch 接收一个参数（通常命名为 error），包含错误信息。

示例：

try {
   let result = someUndefinedFunction();
} catch (error) {
   console.log("捕获到错误：", error.message);
}

使用 throw 主动抛出异常

throw 可以主动抛出一个错误，触发 catch 捕获。

你可以抛出字符串、数字、对象或 Error 实例，推荐使用 Error 对象以便保留调用栈信息。

示例：

try {
   if (!userInput) {
      throw new Error("用户输入不能为空");
   }
} catch (error) {
   console.log(error.message);
}

finally 块的使用

finally 块中的代码无论是否发生错误都会执行，常用于清理资源、关闭连接等操作。

try {
   // 执行操作
} catch (error) {
   // 处理错误
} finally {
   // 总是执行，例如关闭加载状态
}

应用场景：在发送请求前显示 loading，finally 中关闭 loading，确保不会遗漏。

异步代码中的错误捕获

异步操作如 Promise 或 async/await 需要特殊处理方式。

Promise 中使用 .catch()：

fetch('/api/data')
   .then(res => res.json())
   .catch(error => {
      console.log("请求失败：", error);
   });

async/await 中使用 try...catch：

async function getData() {
   try {
      const res = await fetch('/api/data');
      const data = await res.json();
   } catch (error) {
      console.log("获取数据失败：", error);
   }
}

注意：await 必须放在 try 块内，否则无法捕获异常。

全局错误监听

对于未被捕获的异常，可以通过全局事件监听来兜底。

监听 JavaScript 运行时错误：

window.addEventListener('error', function(event) {
   console.log('全局错误：', event.error);
});

监听未处理的 Promise 拒绝：

window.addEventListener('unhandledrejection', function(event) {
   console.log('未处理的Promise错误：', event.reason);
   event.preventDefault(); // 阻止浏览器默认警告
});

这在生产环境中非常有用，可用于上报错误日志。

基本上就这些。掌握 try...catch 结合 throw、finally 以及异步和全局错误处理，就能有效应对大多数 JS 错误场景。不复杂但容易忽略细节。