老板:就是你小子删光了try-catch?

昨天我写了一篇《我删光了项目里的 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.onerrorSentryVue.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能实现一样的效果,我直接用别人的准没问题了吧


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

我:

相关推荐
茄汁面6 小时前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js
杰出的胡兵6 小时前
2v1带您实战12nm高级数字后端
前端·soc·数字后端·数字ic后端·芯片设计全流程培训
Achieve前端实验室6 小时前
深入浅出 ES Module
前端·javascript·前端框架
炳子6 小时前
小程序地图组件(map)中使用全屏预览图片(previewImage)的问题解决方案
前端
Onion6 小时前
BroadcastChannel 使用:优缺点、场景示例与最佳实践
前端·javascript
东东2336 小时前
搭建 Vite + React 服务端渲染(SSR)环境
前端·javascript·react.js
上车函予6 小时前
点击即扩散:使用 View Transition API 实现 UnoCSS 官网同款主题切换动画
前端·javascript·css
星链引擎6 小时前
生成式 AI 驱动下的智能聊天机器人 技术架构核心实现与场景落地
前端
Asort6 小时前
React框架深度剖析:设计理念、核心机制与现代生态对比
前端·javascript·react.js