JavaScript错误处理：try...catch与异常详解

JavaScript错误处理远不止简单包裹try...catch，它是一套需分层设计、精准识别与主动兜底的系统工程：同步错误可用try...catch捕获，但异步错误、语法错误和未处理Promise拒绝则完全逃逸其外；真正健壮的方案要求用语义化的Error子类（如ValidationError、NetworkError）区分业务异常类型，结合instanceof实现精细化错误分流；Promise链必须显式终止错误传播，避免静默失败；全局层面还需同时监听error和unhandledrejection事件，双管齐下覆盖所有错误场景——忽略任一环节，都可能让关键异常悄然消失，危及用户体验与系统可观测性。

JavaScript 中的错误处理不能只靠 try...catch 包一层就完事——它本身不捕获异步错误、不拦截语法错误、也不区分业务异常和系统崩溃。真正可靠的错误流，得靠「分层拦截 + 类型识别 + 明确抛出」。

哪些错误 try...catch 根本抓不到

try...catch 只能捕获同步执行中 throw 出来的错误，以及运行时抛出的异常（比如 ReferenceError）。但以下情况它完全失效：

• 异步回调里的错误（setTimeout、Promise 回调、事件处理器）
• 顶层语法错误（比如 const a = ;），直接阻断脚本加载
• Promise.reject() 未被 .catch() 或 await 捕获时，会触发 unhandledrejection
• 资源加载失败（ 的 onerror、fetch 网络中断）需单独监听

用 Error 子类实现可识别的业务错误

直接 throw new Error("下单失败") 会导致所有错误类型混为一谈，无法做差异化处理。应该定义明确语义的子类：

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

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

这样在 catch 块里就能用 instanceof 精准分流：

try {
  await submitOrder();
} catch (err) {
  if (err instanceof ValidationError) {
    showFieldError(err.field, err.message);
  } else if (err instanceof NetworkError) {
    showRetryButton();
  } else {
    reportToSentry(err); // 兜底上报
  }
}

Promise 链中的错误必须显式终止或转发

Promise 的错误传递是隐式的，但一旦漏掉 .catch() 或没用 await，错误就会丢失。常见陷阱：

• fetch().then(...) 不加 .catch() → 网络失败静默丢弃
• async 函数里 await 一个没 .catch() 的 Promise → 错误向上冒泡到调用方
• 多个并行请求用 Promise.all([p1, p2]) → 任一失败整个 reject，需改用 Promise.allSettled 保全结果

推荐写法：始终让每个 Promise 链有终点

fetch("/api/order")
  .then(res => {
    if (!res.ok) throw new NetworkError("HTTP error", res.status);
    return res.json();
  })
  .then(data => updateUI(data))
  .catch(err => handleError(err)); // 这里是必须的

全局错误兜底不能只靠 window.onerror

window.onerror 只能捕获脚本执行错误（如 TypeError），且无法获取堆栈详情；而 unhandledrejection 才管 Promise 漏掉的 reject。两者必须共存：

window.addEventListener("error", event => {
  // 同步错误：event.error 是 Error 实例
  reportError(event.error || new Error(event.message));
});

window.addEventListener("unhandledrejection", event => {
  // 异步错误：event.reason 是 reject 的值
  reportError(event.reason);
});

注意：event.error 在某些浏览器中可能为 null，要兼容就得靠 event.message + event.filename + event.lineno 拼凑基础信息。

最常被忽略的是：自定义错误类必须手动设置 name，否则 instanceof 判定会失效；而 Promise.allSettled 返回的 fulfilled/rejected 状态对象里，reason 字段才是真正的错误实例——不是所有 rejected 都带堆栈。

终于介绍完啦！小伙伴们，这篇关于《JavaScript错误处理：try...catch与异常详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！