授权与合规声明本文为技术实操分享所有示例均在自建隔离环境中验证或为可复现的演示代码文中版本、命令与数据均标注来源无法核验的已标「待验证」不含任何攻击步骤、利用载荷与绕过手法。转载请注明出处。一、为什么不能每次都现写一遍前端接大模型初学者常在每个页面里手写fetch 读流 拼字符串。功能能跑但三个问题反复出现流式中断做不了、错误重试各写各的、loading/error 状态散落一地。1.1 重复代码的代价每多一个对话/补全入口就多一套「读流 状态 重试」逻辑。一旦要统一加「中断按钮」或「失败自动重试」得改 N 个地方。1.2 正确姿势封成一个 Hook把「调用大模型」这件事封装成一个useLLM之类的 Hook对外只暴露send / stop / retry和text / loading / error。页面只关心业务不关心流的细节。二、Hook 要解决的四个状态2.1 loading / error / done最基础的三角色请求中、出错了、完成了。用status单一字段表达避免三四个布尔值互相打架。2.2 可中断大模型生成可能很长用户想随时停。必须用AbortController把请求和中止能力暴露出来。三、一个可复用流式 Hook 示意下面用 React 演示一个支持流式、中断、重试的 Hook 骨架。⚠️ 代码待验证import { useCallback, useRef, useState } from react; type Status idle | streaming | done | error; export function useLLM(endpoint: string) { const [text, setText] useState(); const [status, setStatus] useStateStatus(idle); const ctrl useRefAbortController | null(null); const send useCallback(async (prompt: string, retry 0) { ctrl.current?.abort(); const ac new AbortController(); ctrl.current ac; setText(); setStatus(streaming); try { const res await fetch(endpoint, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt }), signal: ac.signal, }); const reader res.body!.getReader(); const dec new TextDecoder(); while (true) { const { value, done } await reader.read(); if (done) break; setText((t) t dec.decode(value, { stream: true })); } setStatus(done); } catch (e) { if ((e as Error).name AbortError) return; // 用户主动中断 if (retry 2) return send(prompt, retry 1); // 有限重试 setStatus(error); } }, [endpoint]); const stop useCallback(() ctrl.current?.abort(), []); return { text, status, send, stop }; }3.1 流式怎么读重点在res.body.getReader()逐块读取并拼接。TextDecoder的stream: true保证多字节字符不被截断——这是中文场景最容易踩的坑。3.2 中断与重试怎么共存用户主动中断AbortError要静默忽略不算错误真正的网络异常才走重试且重试次数必须设上限避免死循环。四、状态管理的两个细节4.1 用单一 status 而非多个布尔status枚举比isLoading !isError这类组合更不容易出状态不一致。组件渲染直接switch(status)。4.2 文本累积要防抖渲染高频setText会触发大量重渲染。生产可加节流或在流式阶段用requestAnimationFrame合并更新。五、生产落地的三个增强5.1 密钥绝不进前端大模型调用必须走自有后端或 BFF 代理前端只调自己的接口。密钥落浏览器等于公开。5.2 错误要可区分把「用户中断 / 网络错误 / 服务端错误 / 内容被拦截」区分开分别给不同提示而不是统一「出错了」。5.3 可观测记录每次调用的耗时、是否重试、是否中断。前端虽不直接计成本但这些信号能帮你定位是模型慢还是网络抖。配套资料这一章讲的前端密钥与错误区分设计我整理了一份「前端接大模型安全清单」扫码即可获取六、常见坑6.1 中文被截断没用TextDecoder的stream模式偶尔出现半个字符乱码。一定要带stream: true。6.2 重试变死循环重试不带上限或把中断当失败结果用户一停就立刻重发。区分AbortError是底线。6.3 密钥硬编码把 API Key 写进前端代码或塞进请求等于把钥匙挂门口。七、从页面到组件的封装建议7.1 再封一层 UI 组件Hook 之上是「对话组件」「补全组件」它们只消费text/status/send/stop业务页面完全不碰流。7.2 上线检查单是否暴露了 stop 中断能力重试是否有上限且区分中断中文流式是否用stream: true解码密钥是否在后端错误是否分类提示配套资料文末资料包里有一份「前端 AI Hook 封装检查单」把上面七章逐项拆成可勾选项扫码即可获取附表 A本文引用事实与出处对照表事实/结论出处本文位置大模型流式输出需逐块读取并拼接通用前端工程实践第三章中文流式须用 TextDecoder 的 stream 模式防截断通用前端工程实践第三章、第六章前端调用大模型须经后端/BFF 代理密钥不可落浏览器通用安全工程实践第五章、第六章中断(AbortError)不应计入失败重试本文提出的设计判据第三章、第六章附表 B术语速查表术语含义useLLM封装大模型调用的可复用 Hook 示例名AbortController浏览器用于中断进行中请求的原语流式渲染边生成边显示而非等全部完成BFF前端与后端之间的聚合代理层写在最后这篇用到的资料写这篇文章时我把流式 Hook 的完整可运行版和封装检查单整理成了资料顺手也整理了几份配套的东西useLLM 完整版含节流与错误分类前端接大模型安全清单密钥/错误/可观测组件封装示例对话与补全两种 UI 组件资料是我自己整理的放在下面这个码上扫码即可获取资料较多建议先看「全套 AGI 大模型学习路线」再挑一个实战项目跟练。