JavaScript 错误处理

学习 try/catch/finally 处理异常 · 难度：入门 · +10XP

JavaScript 错误处理完全指南

错误处理（Error Handling）是编写健壮 JavaScript 应用的基础技能。通过 try...catch...finally 语句捕获运行时错误、throw 语句主动抛出异常、以及自定义错误类型，可以优雅地处理异常情况，防止程序崩溃，并提供友好的用户体验。

try...catch...finally 基础

1. try 块包裹可能出错的代码
2. catch 块捕获错误并处理
3. finally 块无论是否出错都会执行（常用于清理资源）

try {
  // 可能出错的代码
  const result = riskyOperation();
  console.log("成功:", result);
} catch (error) {
  // 错误处理
  console.error("捕获到错误:", error.message);
  console.error("错误名称:", error.name);
  console.error("错误堆栈:", error.stack);
} finally {
  // 无论是否出错都执行
  console.log("清理资源...（始终执行）");
}

JavaScript 内置错误类型

throw 与自定义错误

// 主动抛出错误
function divide(a, b) {
  if (b === 0) {
    throw new Error("除数不能为零！");
  }
  if (typeof a !== "number" || typeof b !== "number") {
    throw new TypeError("参数必须是数字");
  }
  return a / b;
}
// 自定义错误类
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}
function validateUser(user) {
  if (!user.name) throw new ValidationError("用户名不能为空", "name");
  if (user.age < 0) throw new ValidationError("年龄不能为负数", "age");
}
try {
  validateUser({ name: "", age: -5 });
} catch (err) {
  if (err instanceof ValidationError) {
    console.log("验证错误字段:", err.field); // 可以从错误对象获取额外信息
  } else {
    console.error("未知错误:", err);
  }
}

异步错误处理

// Promise 错误处理
fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("请求失败:", err));

// async/await 错误处理
async function loadData() {
  try {
    const res = await fetch("/api/data");
    const data = await res.json();
    return data;
  } catch (err) {
    console.error("加载数据失败:", err.message);
    return null; // 返回默认值，优雅降级
  }
}