--- title: "从一次“汇率换算”的救援行动，看 AI 如何重塑研发效能" date: 2025-09-23 description: "深度复盘汇率换算页高频交互下的请求风暴与网关 502 故障。诊断了因双重 watch、缺乏防抖及 OPTIONS 预检冲突引发的根因。实战分享利用 AI 辅助，分钟级实现合并监听、前端 TTL 汇率缓存及 Debounce 治理。探讨在 AI 研发模式下，通过对浮点精度与财务安全的最终裁决，实现效能质跃与业务稳定的完美平衡。用“外骨骼”思维重塑复杂业务的工程交付水平。" canonical_url: "https://yijinlee.com/articles/article-18" tags: - Debounce - watch - 汇率 - CORS - OPTIONS - 研发效能 - "AI 协同" topic: "AI 外骨骼" --- 设想这样一个场景：你的研发团队刚刚上线了一个新版本，其中包含一个看似极其基础的功能——汇率换算页。用户在前端切换币种、输入金额，系统返回折算后的价格。一切听起来水到渠成。 但到了线上，监控报警了。 运维同学甩过来一张 Network 网络面板的截图，上面密密麻麻全是红色的报错和重复的请求。原来，用户在快速点击切换币种、或者连续输入金额时，系统像是一个得了多动症的孩子，疯狂地向服务器发送 `findExchangeRate`（查询汇率）和 `priceConvert`（价格折算）请求。更要命的是，这种瞬间的并发请求，直接引发了部分环境下跨域预检（OPTIONS）的 502 网关错误和 CORS 报错。 放在过去，解决这种问题是一场典型的“研发泥潭”。前端工程师需要去排查究竟是哪个组件触发了重复渲染，是不是 `watch` 监听器写重了？是不是状态管理出了岔子？后端同学则要抱怨前端不懂节流，白白浪费服务器资源。几个人开个会，吵一架，半天时间就没了，最后可能还要推翻重写。 但这恰恰是我们这周遇到的真实案例。不同的是，这一次，我们仅用了极短的时间，就在“改动最小、结构最清晰”的前提下，漂亮地解决了战斗。 秘诀是什么？我们引入了一位“不知疲倦的数字结对编程伙伴”——对话式 AI。 借着这次复盘，我想和各位聊聊，AI 究竟是如何在真实的商业开发场景中，实实在在地提升我们的工作质量与效率的。它不是噱头，而是正在发生的工作流革命。 ### 第一阶段：赛博神探的病情诊断 出现 Bug 时，最耗时的往往不是“治”，而是“找”。 当我们把那张密密麻麻的网络请求截图，配合几十行相关的核心代码“喂”给 AI 时，奇妙的化学反应发生了。AI 并没有像传统的搜索引擎那样，给我们返回一堆似是而非的 CSDN 链接，而是直接切中了要害。 它从业务现象反推了成因，并指出了我们代码里的几处“暗雷”： 1. 双重监听陷阱（双 watch）：用户切换 Tab 栏时，代码同时修改了“基础币种”和“目标币种”两个状态，导致对应的监听器被同时触发，发出了两遍请求。 2. 缺乏防抖机制：用户在输入框里快速敲击“1000”这个数字，键盘每按一下，前端就傻乎乎地去问一次后端“现在多少钱”。 3. 连锁反应：这种瞬间的高频请求，直接触发了浏览器和网关的安全机制，导致了那些莫名其妙的 502 和 CORS 报错。 管理视角看效能：在这一步，AI 充当了一个经验丰富的“技术大牛”角色。它帮助团队跳出了“当局者迷”的困境，把定位问题的时间从按“小时”计，压缩到了按“分钟”计。对于企业而言，排查时间的缩短，直接等同于研发成本的降低和线上故障影响面的收缩。 ### 第二阶段：务实的外科手术 找到了病因，接下来怎么治？ 年轻的工程师往往喜欢“推翻重来”，搞一套极其复杂的新架构。但这在商业交付中是大忌——牵一发而动全身，极易引入新 Bug。 我们给 AI 下达了明确的指令：“在不推翻现有架构的前提下，给出可落地的最小改动方案。” AI 给出的答卷堪称惊艳。它没有建议我们去重写整个组件库，而是像一个老练的架构师一样，给出了几个四两拨千斤的“微创手术”方案： 首先是请求收敛。既然切换 Tab 会同时改动两个币种，那就合并监听，确保状态全部更新完毕后，再统一发送一次请求。 其次是本地换算与 TTL 缓存。AI 提出了一个绝妙的建议：既然用户刚刚查过“美元兑人民币”的汇率（`findExchangeRate`），我们为什么还要再去请求后端做“价格折算”（`priceConvert`）呢？直接在前端把刚才查到的汇率存下来（比如设置一个 5 分钟的 API 层 TTL 缓存），用户后续输入金额时，直接在本地用乘法算出来不就好了吗？ 最后是防抖（Debounce）。给输入框和 Tab 切换加一个几百毫秒的延迟，用户手速再快，系统也只认最后一次操作。 一套组合拳下来，原本像瀑布一样的网络请求，被收敛得干干净净。服务器压力骤降，前端响应如丝般顺滑。 管理视角看效能：AI 不仅提供了代码层面的补丁，更提供了一种“工程学上的务实思维”。它懂得妥协，懂得资源最大化利用。这种在资源约束下寻找最优解的能力，正是我们所期望的工程师素养。AI 的介入，无形中拉高了整个团队的平均代码质量下限。 ### 第三阶段：代码与文档的完美闭环 作为管理者，你一定痛恨一件事情：代码改完了，但没人写注释，文档永远落后于代码。等几个月后换个人接手，这块代码就成了谁也不敢碰的“祖传屎山”。 在这次优化中，我们将 AI 的最后一步任务定为：“同步产出符合 SOLID 原则的中文注释与代码说明”。 几秒钟后，AI 不仅输出了优化后的代码，还在关键逻辑处打上了清晰、易懂的中文注释，并且生成了一份简短的 Markdown 说明文档，详细解释了为什么要在这一层做缓存，防抖的毫秒数是基于什么考量设置的。 工程师只需要复制、微调、提交。文档与代码脱节的问题，迎刃而解。 ### 重新认识AI：不是替代者，而是最强外骨骼 复盘到这里，大家可能会产生一个错觉：AI 这么厉害，那还要工程师干什么？ 这就是我想跟各位探讨的最核心的问题：我们需要看透当前 AI 技术的本质，才能科学地管理和使用它。 目前市面上的大语言模型（LLM），其本质不是在浏览器里真实地执行你的代码，也没有真正“读懂”你的服务器日志。它依靠的是在海量文本和开源代码库上进行的统计学习。简单来说，它建立了一种“上下文 Token → 下一 Token 分布”的超强预测能力，再结合人类指令的微调（RLHF），让它生成的回答在概率上显得“最像一个正确答案”。 这就意味着，AI 是一个极其强大的“模式识别器”，但它缺乏对具体项目约束的“常识感知”。 举个例子，在这次汇率优化中，AI 建议我们在前端直接拿汇率做乘法运算。代码写得非常漂亮，但最终拍板的依然是人类工程师。 因为工程师知道，前端 JavaScript 存在经典的浮点数精度丢失问题（比如 `0.1 + 0.2 != 0.3`），而这在涉及到钱的汇率计算上是致命的。所以，工程师在这里做了最终的业务裁决：引入了处理高精度计算的类库来配合 AI 的方案，并且规定了在金额过大时，必须回退到调用后端的 `priceConvert` 接口，以保证财务数据的绝对安全。 所以，AI 能替代人吗？完全不能。 人类工程师依然要负责最关键的环节：拍板（商业决策）与验证（结果兜底）。缓存时长设多久不影响业务？本地换算精度是否和后端一致？这些都需要懂业务的人来定夺。 在这个工作流中，AI 承担的是“检索——归纳——草稿”的脏活累活。它就像一套极其先进的钢铁侠机甲（外骨骼），让原本只能举起 50 斤的工程师，轻松举起 500 斤的重物。它极大地缩短了我们从“发现问题”到“拿出可运行补丁”的路径。 ### 结语：拥抱科学、审慎的AI工程观 这次“汇率页优化”只是一件极其微小的日常开发任务。但我希望通过这滴水，折射出 AI 赋能研发的真实面貌。 使用 AI 提升效率，绝不是盲目地把业务代码丢给大模型，然后闭着眼睛复制粘贴。这不仅会带来安全隐患，也是对技术的不负责任。 真正高效、科学的做法，是将其定位为增强型协作工具。我们采取“小步改动 + 线上验证”的策略： * 让 AI 去读那些枯燥的报错日志； * 让 AI 去提供两三种重构思路的草稿； * 让 AI 去把啰嗦的逻辑提炼成干净的代码； * 让 AI 去补全那些没人爱写的注释。 而我们的工程师，则把省下来的宝贵精力，投入到理解商业逻辑、把控系统架构边界、以及保障数据安全这些真正具有创造性和决定性的工作上。 未来的研发团队，将不再比拼谁能在 Google 上搜问题搜得更快，也不再比拼谁能熬夜敲出更多的代码。未来的核心竞争力，在于谁能更好地“驾驭”AI，谁能更精准地向 AI 提出好问题，并对 AI 的产出进行专业的判断与整合。 这也是我们正在努力打造的：一支既懂商业逻辑，又装备了现代 AI 武器，具备极高单兵作战能力的精锐技术团队。 ## 参考文章：相关链接 - [ECMA-402 · NumberFormat](https://tc39.es/ecma402/#numberformat-objects)（权威引文）— 国际化数字与货币格式标准，支撑汇率换算救援的正确性边界。 - [Unicode CLDR · Currency](https://cldr.unicode.org/index/downloads)（官方文档）— 货币与区域数据权威源，避免硬编码汇率展示规则。 - [HostApp 核心 H5 架构踩坑与进化史](https://yijinlee.com/articles/article-60)（站内深度）— 多币种结算防爆在 HostApp 中的架构落点。 - [我是如何用 AI 把4小时的前端需求缩短到75分钟的？](https://yijinlee.com/articles/article-25)（站内深度）— 同类 AI 协同压缩交付的对照样本。