javascript错误处理如何进行_try…catch语句如何捕获和处理异常【教程】

狼影 2026-01-17 00:00:00 次阅读

try…catch仅捕获同步执行栈中的throw错误和运行时异常（如ReferenceError），不捕获SyntaxError、未await的Promise拒绝、事件/定时器回调错误；需配合await或.catch()处理异步错误，并辅以window.onerror和window.onunhandledrejection全局兜底。

try…catch 不能捕获异步错误、语法错误和 Promise 拒绝（除非显式 await）——这是最常被误用的点。

try…catch 能捕获什么，不能捕获什么

它只捕获当前执行栈中同步抛出的 throw 错误，以及运行时异常（如 ReferenceError、TypeError）。不捕获：

SyntaxError（脚本加载阶段就失败，根本进不了 try 块）
未被 await 的 Promise 拒绝（例如 fetch().catch() 没写，又没 await，错误直接丢失）
事件回调里的错误（如 button.addEventListener('click', () => { throw new Error(); })）
定时器回调中的错误（setTimeout(() => { throw new Error(); }, 100)）

Promise 中正确使用 try…catch 的写法

必须配合 await 才能让拒绝态 Promise 触发 catch；否则要靠 .catch() 或 try…catch 包裹 await 表达式本身。

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('请求或解析失败:', err.message);
    // 这里能捕获 fetch 失败、JSON 解析异常、手动 throw
  }
}

注意：fetch() 本身不会因 HTTP 状态码（如 404/500）reject，需手动判断 res.ok 并 throw。

全局错误兜底：window.onerror 和 window.onunhandledrejection

用来捕获 try…catch 漏掉的错误，是实际项目中必不可少的补救措施：

window.onerror：捕获同步脚本错误、资源加载失败（如 JS 文件 404）
window.onunhandledrejection：捕获未被 .catch() 或 try…await…catch 处理的 Promise 拒绝

示例：

window.onerror = function(msg, url, line, col, error) {
  console.error('全局同步错误:', { msg, url, line, col, stack: error?.stack });
  return true; // 阻止默认错误提示
};
window.onunhandledrejection = function(event) {
console.error('未处理的 Promise 拒绝:', event.reason);
// 上报错误日志
};