要实现对 流式返回的 JSON 数据(如 DeepSeek 的 SSE 流式响应)进行 逐字解析并实时渲染,而不是等待整个 JSON 完整加载后再处理,需要明确以下目标和问题:
文章目录
核心目标
- 逐步接收数据流(chunk by chunk)
- 逐步拼接字符串
- 逐步解析 JSON(部分解析)
- 实时渲染/更新 UI
技术方案概述
1. 使用 fetch
+ ReadableStream
接收流式数据
const response = await fetch('https://api.deepseek.com/stream-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
prompt: '讲一个故事'
})
});
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
2. 读取 chunk 并拼接到 buffer 中
while (true) {
const {
done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, {
st