← सभी गाइड पर लौटें

React 前端流式显示 LLM 回复：用 59API 跑通 SSE

为什么要在 React 里做流式输出

LLM 一次性返回完整答案时，页面会像“卡住”一样。流式输出能把首 token 尽快显示出来，用户会明显感觉更快，尤其适合聊天、代码生成和长摘要场景。更重要的是，这种体验和大模型产品非常接近，能直接提升留存和完成率。

如果你已经有 OpenAI 兼容的请求代码，接入 59API 的成本很低：把 base URL 指向 https://api.59api.com，保留原来的请求结构即可。它按量计费，适合先做小流量验证，而且 Claude 和 GPT 都能用，价格也很有竞争力。

第 1 步：发起一个可流式的请求

请求体里把 stream 设为 true。下面这个示例可以直接放进 React 的按钮点击事件里，模型名替换成你在 59API 已开通的 Claude 或 GPT 模型即可：fetch('https://api.59api.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 你的API_KEY' }, body: JSON.stringify({ model: 'gpt-4o-mini', messages: [{ role: 'user', content: '用三点解释 React 流式渲染' }], stream: true }) })。

第 2 步：在组件里逐段读取 SSE

核心思路很简单：拿到 response 后，用 res.body.getReader() 读取字节流，再用 TextDecoder 把数据拼成字符串，按 \n\n 切分事件块，逐个解析 data 行。这样每到一小段内容，就可以立刻 setState 追加到界面上。

一个可直接改造的 React 片段如下：const [answer, setAnswer] = useState(''); const [loading, setLoading] = useState(false); const controller = new AbortController(); 读取循环可以写成：while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const chunks = buffer.split('\n\n'); buffer = chunks.pop(); for (const chunk of chunks) { const line = chunk.split('\n').find(v => v.startsWith('data: ')); if (!line) continue; const data = line.slice(6).trim(); if (data === '[DONE]') return; const json = JSON.parse(data); const delta = json.choices?.[0]?.delta?.content || ''; setAnswer(prev => prev + delta); } }

第 3 步：把取消按钮也做上

流式输出不只是“快”，还要可控。用户如果已经看懂了前半段，最好能直接点“停止生成”，这时调用 controller.abort() 就能立刻中断请求。这样既节省 token，也减少无效等待，对按量付费尤其友好。

• 开始生成：把 loading 设为 true，清空 answer，再发起流式请求。
• 停止生成：调用 controller.abort()，并把 loading 设为 false。
• 异常处理：如果 res.ok 为 false，先读出错误信息再提示用户，避免界面一直转圈。

为什么 59API 适合这个方案

59API 是 OpenAI SDK 兼容的 AI API relay，Claude 和 GPT 都能直接接入，Claude Code、Codex 和常见 OpenAI SDK 的迁移成本都很低。对前端团队来说，你不需要重写整套调用逻辑；对预算敏感的项目来说，它的低价按次计费和原生官方质量模型很适合做原型、内测和生产小流量。还有推荐返利机制，适合团队分发注册链接。

实战建议

生产环境里，不要把 API Key 直接暴露在浏览器。更稳妥的做法是：React 只负责展示流式文本，真正的请求放到你的后端转发，再把 SSE 原样推回前端。先用 59API 跑通体验，再补代理层，会是最省时间的路线。

如果你想快速验证这个方案，可以先注册 59API 账号，拿到 Key 后把上面的示例跑起来。通常十分钟内，你就能看到“边生成边显示”的效果，并且马上感受到它在速度、成本和兼容性上的优势。

मूल्य · दस्तावेज़