前端开发处理‘流式数据’与‘非流式数据’，在接收完整与非完整性数据时应该如何渲染和使用

在前端开发中，处理 非流式数据 和 流式数据 的方式不同。根据是否完整接收数据、是否实时渲染的需求，可以分为以下四种典型场景：

---

一、四类常见场景总结

类型	数据完整性	是否实时渲染	适用技术/方法
A	完整数据（一次性返回）	否（等全部加载完）	fetch, axios, JSON.parse()
B	完整数据（一次性返回）	是（模拟逐字显示）	setTimeout / requestAnimationFrame 模拟打字效果
C	不完整数据（分段传输）	否（等全部加载完）	buffer 缓存 + 最终解析
D	不完整数据（分段传输）	是（边接收边渲染）	ReadableStream, SSE, WebSocket, JSON 增量解析

场景对比表

场景	是否流式	是否实时渲染	是否需要增量解析	代表应用
A	非流式	否	不需要	获取静态数据
B	非流式	是	不需要	AI 回答展示
C	流式	否	需要	日志聚合、大文件解析
D	流式	是	需要	AI 聊天机器人、代码生成器

---

具体情况和项目还需要具体分析，并非生搬这四种场景。以下为场景对比的详解与实现：

场景详解与实现方案

---

场景 A：完整数据 + 非实时渲染（最常见）

适用于传统 API 请求，如获取用户列表、文章内容等。

示例代码：

const response = await fetch('/api/data');
const data = await response.json();
render(data);

渲染逻辑：

function render(data) {document.getElementById('content').innerText = data.content;
}

---

场景 B：完整数据 + 实时渲染（模拟打字效果）

适用于需要“逐字显示”的视觉效果，比如 AI 对话界面。

示例代码：

const response = await fetch('/api/data');
const data = await response.json();simulateTyping(data.content, document.getElementById('output'), 50);

打字函数实现：

function simulateTyping(text, element, interval = 50) {let index = 0;const timer = setInterval(() => {if (index < text.length) {element.textContent += text[index++];} else {clearInterval(timer);}}, interval);
}

---

场景 C：不完整数据 + 非实时渲染（等待拼接完成）

适用于大文件下载、日志聚合等场景，需等到所有数据接收完毕后再统一处理。

示例代码：

let buffer = '';while (true) {const { done, value } = await reader.read();if (done) break;buffer += decoder.decode(value, { stream: true });
}// 等待完成后统一解析
const finalData = JSON.parse(buffer);
render(finalData);

---

场景 D：不完整数据 + 实时渲染（流式解析 + 边接收边展示）

适用于 AI 流式回复、聊天机器人、代码生成器 等场景，需边接收边解析边渲染。

核心流程：

1. 接收 chunk 数据
2. 拼接到 buffer
3. 尝试增量解析
4. 提取有效字段并更新 UI

示例代码（结合 jsonparse）：

import sax from 'jsonparse';let buffer = '';
const parser = new sax.Parser();parser.onValue = function (value) {if (this.stack.length === 1 && this.key === 'content') {updateUI(value); // 实时渲染 content 字段}
};async function processStream() {const response = await fetch('/api/stream-endpoint', {method: 'POST',body: JSON.stringify({ prompt: '讲个故事' })});const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) break;buffer += decoder.decode(value, { stream: true });try {parser.write(buffer);buffer = ''; // 成功解析后清空 buffer} catch (e) {// 忽略不完整 JSON 错误，继续等待更多数据}}parser.close();
}function updateUI(text) {const container = document.getElementById('output');container.textContent += text;
}

---

技术选型建议

使用场景	推荐技术
非流式完整数据	fetch, axios, JSON.parse()
流式数据（HTTP SSE）	EventSource, fetch + ReadableStream
WebSocket 数据流	WebSocket, Socket.IO
JSON 增量解析	jsonparse, clarinet
实时 UI 更新	requestAnimationFrame, DOM diff, 节流控制

---

Vue / React 场景优化建议

Vue 示例（使用 ref 控制 DOM）

<template><div id="output">{{ outputText }}</div>
</template><script setup>
import { ref } from 'vue';
const outputText = ref('');function updateUI(text) {outputText.value += text;
}
</script>

React 示例（使用 useState 或 useRef）

function ChatBox() {const [text, setText] = useState('');const containerRef = useRef(null);function updateUI(chunk) {setText(prev => prev + chunk);setTimeout(() => {containerRef.current.scrollTop = containerRef.current.scrollHeight;}, 0);}return (<div ref={containerRef} style={{ height: '300px', overflowY: 'auto' }}>{text}</div>);
}