- 开启流式请求：向后端接口发起普通的 fetch，它会返回一个包含 ReadableStream 的 Response 对象
- 获取流式读取器：调用 response.body.getReader() 获取一个 ReadableStreamDefaultReader 实例
- 循环读取数据块：在 while(true) 循环或 for await 中，通过 reader.read() 或 for await (const chunk of response.body.values()) 拿到 Uint8Array 块
- 解码并追加显示：使用 TextDecoder 将二进制数据解码成字符串，然后每获取一段就更新到页面上，无需等待完整返回
MDN Web Docs
发起流式
const response = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: '你好，AI。' })
});
// response.body 即为 ReadableStream
fetch 默认支持流式响应，response.body 就是一个可读流
获取并使用 Reader
const reader = response.body.getReader(); // 锁定流，获取 reader 实例
const decoder = new TextDecoder('utf-8'); // 用于将 Uint8Array 解码为字符串
let done = false;
while (!done) {
const { value, done: streamDone } = await reader.read();
done = streamDone;
if (value) {
const chunkText = decoder.decode(value, { stream: true });
// 这里拿到了一段字符串 chunkText
appendToPage(chunkText);
}
}
reader.read() 每次返回一个包含 { value: Uint8Array, done: boolean } 的 Promise
传入 { stream: true } 可以确保多次调用 decode 时不会丢失跨块字符
将数据边读边显示
<div id="chat"></div>
<script>
function appendToPage(text) {
const chat = document.getElementById('chat');
chat.textContent += text; // 或者用 chat.innerHTML += 转义／格式化后追加
}
</script>
每次读取到 chunkText，就调用一次 appendToPage，实时更新 DOM，无需等到 done === true
React 示例
import React, { useState, useEffect } from 'react';
function StreamingChat({ prompt }) {
const [text, setText] = useState('');
useEffect(() => {
let cancelled = false;
async function fetchStream() {
setText('');
const res = await fetch('/api/chat', { method: 'POST', body: JSON.stringify({ prompt }) });
const reader = res.body.getReader();
const decoder = new TextDecoder();
let done = false;
while (!done && !cancelled) {
const { value, done: streamDone } = await reader.read();
done = streamDone;
if (value) {
const chunk = decoder.decode(value, { stream: true });
// 追加新内容
setText(prev => prev + chunk);
}
}
}
fetchStream();
return () => { cancelled = true; };
}, [prompt]);
return <pre style={{ whiteSpace: 'pre-wrap' }}>{text}</pre>;
}
export default StreamingChat;
拓展与注意事项
- 错误处理：在 reader.read() 或 fetch 抛错时，捕获后展示重试选项
- 性能优化：若数据量巨大，可考虑每累积一定长度再更新一次状态，避免过多重渲染
- 兼容性：Safari 对流式 API 支持不完全，若需兼容可使用 polyfill 或退回到普通 fetch().then(res => res.text())
- 流式 JSON：若后端返回的是以换行分隔的 JSON 对象流，可在 decoder.decode 后按 \n 切分并 JSON.parse 逐条处理
