17370845950

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);
// 上报错误日志
};

不要在 catch 里吞掉错误却不记录

常见反模式：catch (e) { /* 空着 */ } 或只 console.log(e) 却没上报、没降级逻辑。生产环境应至少做到：

• 记录错误（console.error + 上报服务）
• 提供用户可感知的反馈（如 toast 提示“操作失败，请重试”）
• 必要时 fallback 行为（如加载失败显示缓存数据）

另外，catch 块里再抛错要谨慎——若没上层捕获，会触发 onunhandledrejection 或 onerror，但容易形成重复上报。

异步错误边界比想象中更脆弱；真正健壮的错误处理，从来不是靠一层 try…catch，而是分层拦截 + 全局兜底 + 明确的错误归因