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

React 前端流式输出 LLM：用 59API 接入的完整示例

为什么 React 应该使用流式 LLM 响应

聊天应用若等待模型生成完整答案再展示，用户通常会经历数秒空白。流式响应会在模型持续生成时逐段渲染文本，体验更接近 Claude、ChatGPT 等产品。下面以 React 前端和一个轻量 Node.js 服务为例，接入 59API 的 OpenAI 兼容接口。59API 提供 Claude 与 GPT 等官方质量模型的按量付费访问，适合需要控制成本、又不希望降低模型质量的开发团队。

第一步：在服务端保护 API Key

不要把 59API Key 放进 React 的 Vite 环境变量后直接请求浏览器接口，构建产物中的变量可被用户读取。应由服务端代理请求。安装 Express 后，创建接口并将请求转发到 API Base URL：https://api.59api.com。以下示例使用 OpenAI Chat Completions 兼容格式，模型名称请以你的 59API 控制台可用列表为准。

const upstream = await fetch('https://api.59api.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + process.env.API_59_KEY }, body: JSON.stringify({ model: 'gpt-4o-mini', messages: [{ role: 'user', content: req.body.prompt }], stream: true }) });

随后设置 res 的 Content-Type 为 text/event-stream，并把 upstream.body 直接 pipe 到 res。代理层还应校验 prompt 类型、限制长度，并基于登录用户实施限流。这样既避免密钥泄露，也便于统计每个用户的调用成本。

第二步：在 React 中读取响应流

前端提交后，先清空旧答案并创建空的 assistant 消息。fetch 返回 Response 后，通过 body.getReader() 逐块读取 Uint8Array；TextDecoder 的 stream: true 参数可避免中文字符刚好跨分块时出现乱码。

const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) }); const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; let answer = '';

在循环中先累计 buffer，再按换行拆分 SSE 事件。OpenAI 兼容流常见格式为 data: {JSON}，完成时返回 data: [DONE]。不能假设一次 read() 恰好对应一条完整 JSON，否则网络分块变化时会导致解析失败。

while (true) { const { value, done } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const lines = buffer.split('\n'); buffer = lines.pop() || ''; for (const line of lines) { if (!line.startsWith('data: ')) continue; const data = line.slice(6); if (data === '[DONE]') continue; const json = JSON.parse(data); const delta = json.choices?.[0]?.delta?.content || ''; answer += delta; setMessages(prev => [...prev.slice(0, -1), { role: 'assistant', content: answer }]); } }

第三步：处理取消、错误与模型选择

用 AbortController 保存当前请求，点击“停止生成”时调用 controller.abort()。同时检查 response.ok；服务端应将上游的非 2xx 状态转换成可读错误，前端不要把错误页 HTML 当作 SSE JSON 解析。生产环境还应在组件卸载时中止请求，避免页面切换后继续 setState。

模型选择直接影响速度和成本：摘要、分类、改写可优先使用轻量模型，复杂推理或代码审查再切换到更强模型。59API 可让同一套 OpenAI SDK 或兼容请求方式接入不同 Claude、GPT 模型，减少供应商切换时的改造成本。对于有持续调用量的产品，其低价按量付费与推荐返利也有助于把流式聊天的单位成本控制在合理范围。需要实际接入时，可注册 59API 账号创建密钥，并先用小流量验证模型、超时和限流策略。

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