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

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

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() 可能报错
• 错误对象通常有 message、name、stack 属性，stack 对定位最有用

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

这是最常踩的坑：把 fetch 或 axios 请求直接丢进 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、释放锁、重置状态），但它会覆盖 try 或 catch 中的 return 或 throw。

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

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