当前位置：首页 > news >正文

js fetch流式请求 AI动态生成文本，实现逐字生成渲染效果

news 来源：原创 2025/5/13 6:19:08

开启流式请求：向后端接口发起普通的 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 });// 这里拿到了一段字符串 chunkTextappendToPage(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 逐条处理