登录
首页 >  文章 >  前端

JavaScript错误处理教程:try...catch用法解析

时间:2026-01-30 21:09:42 163浏览 收藏

珍惜时间,勤奋学习!今天给大家带来《JavaScript错误处理:try...catch使用教程》,正文内容主要涉及到等等,如果你正在学习文章,或者是对文章有疑问,欢迎大家关注我!后面我会持续更新相关内容的,希望都能帮到正在学习的大家!

JavaScript的try...catch仅捕获同步执行异常,不处理异步错误、语法错误、资源加载失败及Promise拒绝;需在调用处包裹且await异步操作,catch参数应命名避免覆盖Error,finally中避免return或throw。

如何错误处理javascript_try...catch语句如何运用【教程】

JavaScript 的 try...catch 不是用来“兜底所有错误”的万能开关,它只捕获**同步执行中抛出的异常**,对异步错误、语法错误、资源加载失败(如 script 404)、Promise 拒绝(reject)默认不生效。

同步代码异常必须用 try...catch 包裹才被捕获

很多人以为只要写了 try...catch,函数里任何报错都会进 catch——其实不然。只有在 try 块内**实际执行时抛出的异常**才会被捕获。函数定义本身不出错,调用时才可能出错。

  • JSON.parse('{"name":}') // SyntaxError → 放在 try 内会进 catch
  • undefined.foo() → 放在 try 内会进 catch
  • function bad() { return x.y; }(未调用)→ 不会触发任何异常
  • bad()(调用后)→ 才会抛 ReferenceError,且仅当它在 try 块中执行时才被捕获

catch 参数不是必须叫 err,但必须存在

ES2019+ 允许 catch 省略参数(即 catch{}),但此时你完全拿不到错误细节,基本等于“假装没发生”。真实项目中几乎不用。

  • 推荐写法:catch (error) { console.error(error.message); }
  • 注意:error 是运行时绑定的局部变量,不是全局 Error 构造函数
  • 不要写成 catch (Error)——这会覆盖内置 Error,后续 throw new Error() 可能报错
  • 错误对象通常有 messagenamestack 属性,stack 对定位最有用

Promises 和 async/await 的错误不能靠外层 try...catch 自动捕获

这是最常踩的坑:把 fetchaxios 请求直接丢进 try,却不 await,结果 catch 完全不触发。

  • ❌ 错误写法:try { fetch('/api'); } catch (e) { ... }fetch 返回 Promise,不 await 就不算“同步抛错”
  • ✅ 正确写法(async/await):async function f() { try { const r = await fetch('/api'); } catch (e) { ... } }
  • ✅ 或 Promise 链:fetch('/api').catch(e => { ... })
  • 注意:fetch 本身只在网络失败时 reject;HTTP 4xx/5xx 不会 reject,需手动检查 response.ok

finally 总是执行,但别在里面 throw 新错误

finally 适合做清理工作(如关闭 loading、释放锁、重置状态),但它会覆盖 trycatch 中的 returnthrow

  • 如果 tryreturn 1finallyreturn 2 → 整个函数返回 2
  • 如果 catchthrow new Error('a')finally 中又 throw new Error('b') → 外部只能看到 'b''a' 被吞掉
  • 所以 finally 里尽量只做无副作用的操作,避免 returnthrow

真正难的不是语法,而是判断该在哪一层加 try...catch:太深,业务逻辑被异常处理淹没;太浅,错误信息丢失上下文。多数时候,错误处理应该靠近具体操作(比如解析 JSON、调用某个 SDK 方法),而不是堆在入口函数里统一包一层。

今天关于《JavaScript错误处理教程:try...catch用法解析》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>