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

开启流式请求：向后端接口发起普通的 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 逐条处理