JavaScript如何处理异常

JavaScript如何处理异常

在 JavaScript 中，异常处理 是通过 try...catch...finally 语句实现的。它允许开发者捕获并处理运行时错误，避免程序崩溃。以下是异常处理的详细说明：

1. try...catch...finally 语句

(1) 语法

try {
  // 可能抛出错误的代码
} catch (error) {
  // 捕获并处理错误
} finally {
  // 无论是否抛出错误，都会执行的代码
}

(2) 各部分作用

• try：包裹可能抛出错误的代码。
• catch：捕获错误并处理。
• finally：无论是否抛出错误，都会执行的代码（常用于清理资源）。

(3) 示例

try {
  const result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error('计算结果无效');
  }
} catch (error) {
  console.log('捕获错误：', error.message); // 输出：捕获错误：计算结果无效
} finally {
  console.log('执行完毕');
}

2. 抛出异常

(1) throw 语句

• 用于手动抛出异常。
• 可以抛出任何类型的值（如字符串、数字、对象等），但通常抛出 Error 对象。

示例：

function divide(a, b) {
  if (b === 0) {
    throw new Error('除数不能为 0');
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.log('捕获错误：', error.message); // 输出：捕获错误：除数不能为 0
}

(2) 自定义错误类型

• 可以通过继承 Error 创建自定义错误类型。

示例：

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = 'CustomError';
  }
}

try {
  throw new CustomError('自定义错误');
} catch (error) {
  console.log('捕获错误：', error.name, error.message); // 输出：捕获错误：CustomError 自定义错误
}

3. 异常处理的注意事项

(1) 捕获特定类型的错误

• 使用 instanceof 检查错误类型。

示例：

try {
  throw new TypeError('类型错误');
} catch (error) {
  if (error instanceof TypeError) {
    console.log('捕获类型错误：', error.message);
  } else {
    console.log('捕获其他错误：', error.message);
  }
}

(2) 避免空的 catch 块

• 空的 catch 块会隐藏错误，导致难以调试。

错误示例：

try {
  throw new Error('错误');
} catch (error) {
  // 空的 catch 块
}

正确示例：

try {
  throw new Error('错误');
} catch (error) {
  console.log('捕获错误：', error.message);
}

(3) finally 块的作用

• finally 块中的代码无论是否抛出错误都会执行。
• 常用于释放资源（如关闭文件、清理定时器等）。

示例：

let resource = null;
try {
  resource = allocateResource();
  useResource(resource);
} catch (error) {
  console.log('捕获错误：', error.message);
} finally {
  if (resource) {
    releaseResource(resource);
  }
}

4. 异步代码中的异常处理

(1) Promise 的异常处理

• 使用 .catch() 捕获 Promise 中的错误。

示例：

fetch('https://example.com')
  .then(response => response.json())
  .catch(error => {
    console.log('捕获错误：', error.message);
  });

(2) async/await 的异常处理

• 使用 try...catch 捕获 async 函数中的错误。

示例：

async function fetchData() {
  try {
    const response = await fetch('https://example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('捕获错误：', error.message);
  }
}
fetchData();

总结

特性	描述	示例
try	包裹可能抛出错误的代码	try { ... }
catch	捕获并处理错误	catch (error) { ... }
finally	无论是否抛出错误，都会执行的代码	finally { ... }
throw	手动抛出异常	throw new Error('错误')
异步处理	使用.catch() 或 try...catch	async function() { try { ... } catch { ... } }

异常处理是 JavaScript 中保证程序健壮性的重要机制，合理使用 try...catch...finally 可以有效捕获和处理错误，避免程序崩溃。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github