开发者教程QSTAR 内容团队·2026-10-14·5 分钟
五分钟接入流式对话：OpenAI 兼容 /v1/chat/completions 流式实战
手把手用 fetch 实现 SSE 流式对话，附带增量解析、错误处理与打字机渲染的最小可运行示例。
流式对话能让用户在第一 token 到达时就看到输出，体验远好于「转圈三秒后整段弹出」。本文用最朴素的 fetch + ReadableStream 实现，不依赖任何 SDK。
1. 发起带 stream:true 的请求
POST 到 /v1/chat/completions，请求体加 "stream": true，并使用 Authorization: Bearer <key>。服务端会改以 text/event-stream 持续推送。
2. 逐行解析 data: 事件
按换行切分响应流，对以 data: 开头的行做 JSON.parse，取 choices[0].delta.content 拼接到界面。遇到 data: [DONE] 即结束。
3. 渲染与错误兜底
把累积文本交给受控状态即可实现打字机效果。务必捕获网络中断并用「重新生成」兜底，避免半句卡死。
完整示例约 30 行即可跑通，复制后即可替换成你自己的 base_url 与 key 来源。
在 QSTAR 控制台获取 OpenAI 兼容 endpoint