昨天我写了一篇《我删光了项目里的 try-catch,老板:6》
结果评论区一堆大佬冲我吼:
"还是小白,以后你会笑自己的😏"
"你这封装一爽,全组人都得背锅"
"大佬说实话,你们老板真的夸你了吗?"
我一看,哎哟喂,还真有点不对劲。
于是我去查了查,发现我那套"优雅不抛异常"的写法,
确实有点"优雅过头"了。
🧠 一、回顾一下我的骚操作
我封了个函数:
            
            
              js
              
              
            
          
          const [err, data] = await safeRequest(api.getUser(1))
if (err) return showError(err)
console.log('✅ 用户信息:', data)| 优点 | 说明 | 
|---|---|
| ✅ 语法干净 | 不再满屏 try/catch,看着像天才写的代码 | 
| ✅ 错误集中处理 | 统一封装,不用每个接口都写报错逻辑 | 
| ✅ 数据结构统一 | [err, data]一眼明了 | 
没有 try/catch,
没有红红的异常,
只有干净的 [err, data]。
看起来很爽,
但其实是埋雷现场。
💣 二、地雷一览
1️⃣ 语义错乱:async/await 被我玩坏了
正常语义:
成功 → 返回数据
失败 → 抛异常
我这一封装,全变成:
成功 →
[null, data]失败 →
[err, null]
听起来挺合理?
但问题是------异常不会再抛了!
            
            
              js
              
              
            
          
          const [err, res] = await safeRequest(api.getUser())
doSomething(res) // 🙃 忘了判断 err?那炸了程序不崩,但逻辑早飞了。
这就是"静默失败"------最阴险的 bug。
2️⃣ 全局监控失效
大型项目一般都有全局异常捕获:
window.onerror、Sentry、Vue.config.errorHandler......
但我 safeRequest 一上来,
直接把错误吞了,外层根本抓不到。
于是线上日志一片空白。
"奇怪,用户说崩了,我本地没问题啊?"
3️⃣ 框架级错误边界失效
Vue 的 errorCaptured、React 的 ErrorBoundary
都靠异常冒泡来兜底。


但我 safeRequest 一 catch,
框架根本感知不到错误。
✅ 三、改进方案:骚中带稳
            
            
              js
              
              
            
          
          export async function safeRequest(promise, { showError = true, report = true } = {}) {
  try {
    const data = await promise
    return [null, data]
  } catch (err) {
    if (report) reportError(err) // ✅ 上报一下,别装死
    if (showError) ElMessage.error(err.message || '请求失败')
    console.error('[safeRequest 捕获]', err.stack)
    return [err, null]
  }
}这样既能保持"优雅的姿势",
又不至于"优雅地把项目送上天"。🚀
但是还是会有人说有问题,听说已经有大佬封装了await-to-js能实现一样的效果,我直接用别人的准没问题了吧

老板:可以啊,这下你的防御性编程破了吧,明天去财务领奖赏
我:
