实现对deepseek流式返回的json数据,进行逐字解析并实时渲染

要实现对 流式返回的 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

香蕉可乐荷包蛋

努力写有用的code

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值