javascript错误处理怎么做_如何使用try-catch捕获异常？_网络技术

javascript错误处理怎么做_如何使用try-catch捕获异常？

发布时间 - 2026-01-04 00:00:00 点击率：次

try-catch仅捕获同步运行时错误（如ReferenceError、TypeError），无法捕获异步错误；Promise错误需用.catch()或await+try-catch处理；catch应分类处理、记录上下文、友好提示；finally用于清理但不改变错误流向。

try-catch 能捕获哪些错误？

它只捕获**运行时同步错误**，比如 ReferenceError、TypeError、SyntaxError（仅限 eval 内）、RangeError 等。异步操作（如 setTimeout、fetch、Promise 回调）里的错误默认逃逸出 try 块，不会被捕获。

常见误判场景：

写了 try { fetch('/api').then(...); } → fetch 本身不抛错，但 .then 里 throw new Error() 不会被捕获
try { JSON.parse('{"a":}') } → 会触发 SyntaxError，能捕获
try { undefined.foo() } → 触发 TypeError，能捕获

如何正确捕获 Promise 异步错误？

不能靠外层 try-catch 包住 .then()，得用 .catch() 或 await + try-catch。

推荐写法（现代 JS）：

立即学习“Java免费学习笔记（深入）”；

async function loadData() {
  try {
    const res = await fetch('/api');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('请求或解析失败:', err.message);
    // 这里能拿到 fetch 网络错误、JSON 解析错误、手动 throw 的错误
  }
}

注意点：

await 后必须是 Promise，否则不会挂起，也不会把 rejection 转为异常
fetch 只在网络断开等极少数情况 reject；HTTP 4xx/5xx 仍返回 resolve 的 Response 对象，需手动检查 res.ok
不要在 catch 里吞掉错误又不 re-throw —— 后续逻辑可能因 data 是 undefined 再次崩

catch 块里该做什么？

核心原则：**明确错误来源，做最小必要响应，别掩盖问题**。

实用建议：

区分错误类型再处理：if (err instanceof TypeError) vs if (err.name === 'AbortError')
记录关键上下文：比如当前 URL、用户操作步骤、输入参数（避免只打 err.message）
给用户可理解的提示，而不是堆栈：alert('保存失败，请检查网络后重试')，而非 alert(err.stack)
必要时主动 throw err 或 return Promise.reject(err)，让上层决定是否兜底

finally 有什么实际用途？

它不管成功失败都会执行，适合清理工作，但**不能访问 err 或返回值**。

典型用例：

关闭加载态：loading.value = false
释放资源：controller.abort()（配合 fetch 的 signal）
还原 UI 状态：比如解锁按钮、恢复表单 disabled 状态

注意：finally 中抛出新错误会覆盖原错误；若需透传原错误，别在 finally 里 throw。

真正容易被忽略的是：很多人以为 finally 能“兜住”所有异常 —— 它只是保证执行，不改变错误流向。

# javascript # java # js # json # 栈 # ai

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：闪极loomos系列AI眼镜重磅发布，重构日常佩戴体验，再次

下一篇：Win10电脑没声音怎么设置_Windows10声卡驱动及服

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：闪极loomos系列AI眼镜重磅发布，重构日常佩戴体验，再次

下一篇：Win10电脑没声音怎么设置_Windows10声卡驱动及服