JavaScript 如何捕获异常：从基础到进阶的完整指南

在 JavaScript 开发中，异常处理是保证代码健壮性的关键环节。无论是用户输入错误、网络请求失败，还是第三方库的意外行为，都可能导致程序崩溃或行为异常。如何优雅地捕获异常并提供合理的回退方案，是每个开发者必须掌握的技能。

本文将深入探讨 JavaScript 中的异常捕获机制，涵盖 try...catch、Promise 错误处理、async/await 异常捕获，以及现代 JavaScript 的最佳实践。

---

1. 为什么需要异常处理？

JavaScript 是动态类型语言，运行时错误（如 TypeError、ReferenceError）和逻辑错误（如 JSON.parse 解析失败）可能导致程序中断。异常处理的目的是：

• 防止程序崩溃：捕获错误并继续执行。
• 提供回退方案：如返回默认值或降级数据。
• 记录错误日志：便于调试和监控。

---

2. 基础：try...catch 语句

try...catch 是 JavaScript 最基础的异常捕获机制，适用于同步代码。

语法

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

示例 1：捕获函数调用错误

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("除数不能为零");
    }
    return a / b;
  } catch (error) {
    console.error("计算错误:", error.message);
    return Infinity; // 返回默认值
  }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // Infinity（捕获错误）

示例 2：解析 JSON 数据

function parseJson(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("JSON 解析失败:", error);
    return null; // 返回 null 作为默认值
  }
}

console.log(parseJson('{"name": "Alice"}')); // { name: "Alice" }
console.log(parseJson("invalid json"));      // null（捕获错误）

finally 的作用

finally 块中的代码无论是否出错都会执行，常用于资源清理（如关闭文件、释放连接）：

try {
  // 尝试操作
} catch (error) {
  // 处理错误
} finally {
  console.log("操作结束"); // 一定会执行
}

---

3. 异步错误处理：Promise 与 catch

在异步编程中，try...catch 无法直接捕获 Promise 的错误（因为 Promise 的执行是分离的）。此时需使用 .catch() 或 try...catch 结合 async/await。

方法 1：Promise.catch()

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .catch((error) => {
    console.error("请求失败:", error);
    return { default: true }; // 返回默认数据
  });

方法 2：async/await + try...catch

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("请求失败:", error);
    return { default: true }; // 返回默认数据
  }
}

fetchData().then(console.log); // 正常数据或默认值

---

4. 全局错误捕获：window.onerror

对于未被 try...catch 捕获的全局错误（如未处理的 Promise 拒绝），可以通过以下方式监听：

未处理的 Promise 拒绝

window.addEventListener("unhandledrejection", (event) => {
  console.error("未处理的 Promise 错误:", event.reason);
  event.preventDefault(); // 阻止默认行为（如控制台报错）
});

全局错误事件

window.onerror = function (message, source, lineno, colno, error) {
  console.error("全局错误:", { message, source, lineno, colno, error });
  return true; // 阻止浏览器默认错误提示
};

---

5. 现代 JavaScript 的最佳实践

1. 区分错误类型

通过 instanceof 或 error.name 判断错误类型，提供针对性处理：

try {
  // 可能出错的代码
} catch (error) {
  if (error instanceof TypeError) {
    console.error("类型错误:", error.message);
  } else if (error instanceof SyntaxError) {
    console.error("语法错误:", error.message);
  } else {
    console.error("未知错误:", error);
  }
}

2. 自定义错误类

继承 Error 类创建自定义错误，便于识别和调试：

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  throw new ValidationError("输入无效");
} catch (error) {
  console.error(error.name, error.message); // ValidationError 输入无效
}

3. 避免空 catch 块

空 catch 会隐藏错误，导致难以调试：

// ❌ 错误示例：吞掉错误
try {
  riskyOperation();
} catch (error) {
  // 无处理逻辑
}

// ✅ 正确做法：至少记录错误
try {
  riskyOperation();
} catch (error) {
  console.error("捕获到错误:", error);
}

4. 使用可选链（Optional Chaining）简化防御性代码

对于可能为 null/undefined 的对象属性访问，可用可选链（?.）减少 try...catch 的使用：

// 传统方式
let name;
try {
  name = user.profile.name;
} catch (error) {
  name = "Anonymous";
}

// 现代方式
const name = user?.profile?.name ?? "Anonymous";

---

6. 总结

场景	推荐方案
同步代码错误	try...catch
Promise 错误	.catch() 或 unhandledrejection
async/await 错误	try...catch 包裹 await
全局未捕获错误	window.onerror 或事件监听
默认值回退	catch 中返回默认值或使用 ??

关键原则：

1. 明确捕获范围：避免过度捕获导致错误被隐藏。
2. 提供有意义的回退：默认值应符合业务逻辑。
3. 记录错误日志：便于排查问题。
4. 优先使用现代语法 ：如 async/await、可选链等。

通过合理使用异常处理机制，可以显著提升 JavaScript 应用的稳定性和用户体验。