JavaScript中的错误处理与异常捕获策略有哪些

JavaScript作为前端开发的核心语言，在代码执行过程中会因为语法错误、运行时错误、逻辑错误等多种原因出现异常，掌握科学的错误处理与异常捕获策略，是保障应用稳定运行的关键。

JavaScript常见错误类型

在了解捕获策略前，首先需要明确JavaScript中常见的错误类型，不同类型的错误对应不同的处理场景：

• SyntaxError：语法错误，通常是代码编写不符合语法规范导致，这类错误在代码解析阶段就会抛出，无法通过常规的运行时捕获策略处理。
• ReferenceError：引用错误，访问未定义的变量时会触发，属于运行时错误。
• TypeError：类型错误，比如对非函数类型的值进行调用，或者访问null、undefined的属性时会出现。
• RangeError：范围错误，比如递归调用层数过深、数组长度设置为负数等场景会触发。

基础异常捕获：try catch语句

try catch是JavaScript中最基础的异常捕获方式，用于捕获同步代码执行过程中的错误，基本语法结构如下：

try {
  // 可能会抛出错误的同步代码
  let obj = null;
  console.log(obj.name); // 这里会触发TypeError
} catch (error) {
  // 捕获到错误后的处理逻辑
  console.log('捕获到错误：', error.message);
  console.log('错误类型：', error.name);
} finally {
  // 无论是否捕获到错误，都会执行的代码块，可选
  console.log('finally代码块执行完成');
}

需要注意，try catch只能捕获同步代码的错误，对于异步代码（比如setTimeout、Promise）中抛出的错误，无法被外层的try catch捕获，示例如下：

try {
  setTimeout(() => {
    throw new Error('异步代码中的错误'); // 这个错误无法被外层try catch捕获
  }, 100);
} catch (error) {
  console.log('捕获到错误', error); // 不会执行
}

异步代码的错误捕获策略

Promise的错误捕获

对于Promise相关的异步操作，有两种常用的错误捕获方式：

第一种是使用catch方法，捕获Promise执行过程中抛出的错误或者reject的状态：

// 创建一个会reject的Promise
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Promise执行失败'));
  }, 100);
});

promise.then(res => {
  console.log('成功结果', res);
}).catch(error => {
  // 捕获Promise的错误
  console.log('Promise捕获到错误：', error.message);
});

第二种是在async/await语法中结合try catch使用，这是目前处理异步错误最常用的方式：

async function getData() {
  try {
    let response = await fetch('https://ipipp.com/api/data'); // 假设接口请求失败
    let data = await response.json();
    console.log('数据结果', data);
  } catch (error) {
    console.log('async/await捕获到错误：', error.message);
  }
}

getData();

事件监听中的错误捕获

对于DOM事件、网络请求等场景的错误，可以通过对应的事件监听来捕获，比如图片加载失败的错误：

let img = document.createElement('img');
img.src = 'https://ipipp.com/nonexistent.jpg';
img.onerror = function(error) {
  console.log('图片加载失败', error);
};
document.body.appendChild(img);

全局错误捕获策略

当错误没有被任何局部的捕获策略处理时，会触发全局的错误事件，我们可以通过监听全局事件来捕获这些未被处理的错误：

监听window的error事件

该事件可以捕获到绝大多数未被处理的运行时错误，包括同步错误和异步错误：

window.addEventListener('error', function(event) {
  console.log('全局捕获到错误：', event.message);
  console.log('错误文件名：', event.filename);
  console.log('错误行号：', event.lineno);
  // 可以在这里上报错误信息到监控系统
  return true; // 阻止默认的错误提示
});

监听unhandledrejection事件

该事件专门用于捕获未被处理的Promise错误，也就是Promise没有写catch方法，也没有被async/await的try catch捕获的情况：

window.addEventListener('unhandledrejection', function(event) {
  console.log('捕获到未处理的Promise错误：', event.reason);
  // 可以在这里补充错误处理逻辑
  event.preventDefault(); // 阻止默认的控制台错误提示
});

错误处理最佳实践

• 不要过度使用try catch，只包裹确实可能出现错误的代码段，避免把大段无关代码放在try块中，影响性能和错误定位。
• 捕获错误后不要空catch，至少要记录错误信息，方便后续排查问题，生产环境可以将错误信息上报到监控系统。
• 对于可预见的错误（比如接口返回的参数不符合预期），可以使用条件判断提前处理，减少异常抛出的概率。
• 自定义错误类型，方便区分不同模块、不同场景的错误，提升错误处理的针对性：

// 自定义错误类型
class ApiError extends Error {
  constructor(message, code) {
    super(message);
    this.name = 'ApiError';
    this.code = code;
  }
}

// 使用自定义错误
function requestApi() {
  throw new ApiError('接口请求失败', 500);
}

try {
  requestApi();
} catch (error) {
  if (error instanceof ApiError) {
    console.log('接口错误，错误码：', error.code);
  } else {
    console.log('其他类型错误', error.message);
  }
}

合理的错误处理与异常捕获策略，能够让JavaScript应用在面对各种异常情况时保持稳定运行，同时也能帮助开发者更快速地定位和解决问题，提升应用的整体质量。

JavaScript错误处理异常捕获try_catch修改时间：2026-07-16 12:39:41