前端模型推理流式接入实战：vue-vben-admin SSE 请求指南-编程实验室

前端模型推理流式接入实战：vue-vben-admin SSE 请求指南

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin

在 vue-vben-admin 里做前端模型推理，最容易翻车的不是算法，而是流式输出：鉴权头怎么带、断流怎么降级、渲染怎么不卡顿。本文基于其请求层@vben/request的 SSE 能力，给出一套可观测、可降级的前端模型推理流式接入方案，读完你能跑通一个完整的推理结果流式渲染组件。

能力地图：vue-vben-admin 请求层承载模型推理

vue-vben-admin 没有内置开箱即用的 AI 推理包，要接入云端或本地模型推理，最稳的落点是它自带的请求层@vben/request。这一层解决「前端与流式/推理后端通信」的问题：统一鉴权、错误拦截，以及基于 SSE 的逐段流式输出。它的能力边界是只负责传输与拦截，不含模型与算法，推理逻辑放在后端或第三方 API 侧。

关键入口：

packages/effects/request/src/request-client/：RequestClient与上传/下载/SSE 模块，是接入推理传输的落点。
packages/effects/request/src/request-client/modules/sse.ts：SSE 流式实现，基于fetch+ReadableStream，回调onMessage/onEnd。
playground/src/api/request.ts：客户端装配示例，含鉴权头、刷新 token、错误拦截。
packages/effects/hooks/：组合式能力（usePagination、useRefresh等），用于推理 UI 交互。
docs/guide/：官方文档，覆盖请求、鉴权、国际化等背景。

快速接入：装配客户端并跑通流式推理

目标：从零到「流式推理接口跑通」的最短路径，共 3 步。

第 1 步｜获取源码并启动 playground。playground 已内置完整请求层，环境要求 Node 22.18+ 且仅支持pnpm。

git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin pnpm install pnpm dev:play

预期：浏览器访问http://localhost:5555可打开 playground。

第 2 步｜在你的应用里装配请求客户端。RequestClient默认超时 10 秒，流式推理耗时长，需调大；鉴权/刷新 token/错误拦截参考现成示例。

import { RequestClient } from '@vben/request' import { useAppConfig } from '@vben/hooks' const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD) export const requestClient = new RequestClient({ baseURL: apiURL, timeout: 60_000, }) // …其余拦截器（鉴权头/刷新token/错误提示）参考 playground/src/api/request.ts

预期：拿到一个可调get/post/postSSE的requestClient实例。

第 3 步｜调用流式推理接口。postSSE是RequestClient实例上的方法，逐段回调而非整包返回。

await requestClient.postSSE('/ai/predict', { history }, { onMessage, onEnd })

预期：后端每推一段，onMessage触发一次，流结束触发onEnd。

场景一：渲染流式推理结果 📊

业务背景：销售预测页要像打字机一样实时显示模型吐出的分析结论，而非转圈等待整包。核心是用onMessage累积原始块，按 SSE 协议剥离data:前缀后写入响应式状态。

const text = ref('') const done = ref(false) async function runInference() { done.value = false text.value = '' await requestClient.postSSE('/ai/predict', { history: salesData.value }, { onMessage: (chunk) => { for (const line of chunk.split('\n')) { if (line.startsWith('data:')) text.value += line.slice(5).trim() } }, onEnd: () => (done.value = true), }) }

预期：text随流逐段增长，done在onEnd时置真，模板直接绑定text即得打字机效果。

场景二：输入校验与服务降级 🛡️

业务背景：模型服务不可用或样本不足时，页面不能白屏或报错崩溃，要能回退到上次结果或本地线性回归。核心是「先校验、再请求、失败即降级」三段式，把onMessage累积值作为返回值，catch里返回兜底值。

async function predictWithFallback(history: number[]): Promise<string> { if (history.length < 3) return '样本不足，无法预测' // 输入校验 try { let out = '' await requestClient.postSSE('/ai/predict', { history }, { onMessage: (c) => (out += parseDataLine(c)), }) return out || 'EMPTY' } catch { return staticPrediction(history) // 降级：本地线性回归/上次结果 } }

预期：样本过少直接返回提示；服务抛错时走catch返回本地估算值，调用方无需感知失败。

场景三：分页载入历史数据作为推理输入

业务背景：推理需要足够长的历史序列，一次性拉取会撑爆请求体，按页累加更稳。核心是用已验证的requestClient.get配合params翻页，直到拿满或末页。

async function loadHistory(): Promise<Record<string, any>[]> { const rows: Record<string, any>[] = [] let page = 1 for (;;) { const res: any = await requestClient.get('/sales/list', { params: { page, pageSize: 50 }, }) rows.push(...res.data) if (rows.length >= res.total || res.data.length < 50) break page++ } return rows }

预期：返回拼好的历史数组，直接作为postSSE的history入参。

生产要点：可观测、容错与安全

安全：SSE 复用 axios 请求拦截器注入鉴权，务必用装配好的requestClient而非裸new RequestClient({ baseURL })；token 与云 API key 一律走后端下发，不落前端常量。
容错降级：流式接口超时或 5xx 时，postSSE会抛错，调用侧应catch后回退到同步接口或上次结果（见场景二），避免整页失败。
性能：大体积本地模型建议放 Web Worker 或后端推理，前端只接收结果流，避免主线程被模型计算阻塞、卡住渲染。
可观测：在onMessage内记录首包时间与整包耗时，超阈值告警；配合浏览器 DevTools 的网络面板核对text/event-stream是否持续推送。
流控：长流配合AbortController设置最大时长，并在组件卸载时中断，防止离开页面后仍在收流。

高频踩坑

现象：SSE 请求没带上Authorization头 → 原因：postSSE只复用请求拦截器，裸客户端（如未加拦截器的baseRequestClient）不带鉴权 → 解决：用装配好拦截器的requestClient，或手动在headers传入 token。
现象：onMessage拿到的是原始文本块，解析不出字段 → 原因：SSE 模块只负责传输与解码，不做事件解析 → 解决：在onMessage内按data:行拆分并JSON.parse。
现象：流式接口长时间无响应却无超时保护 → 原因：SSE 走原生fetch，不受 axios 默认timeout: 10_000约束 → 解决：自建超时或用AbortController主动中断。