FastAPI StreamingResponse前端接收分片后无法实时打印内容的问题

兄弟，我太懂你这种看着网络面板里分片一直在跳，但代码里就是没法实时抓到内容的憋屈了！你现在用的axios默认是把所有响应分片攒齐、拼接成完整结果后才返回给你，自然没法在每个分片刚到达的时候就触发打印，得改改请求配置，让它支持流式处理才行。

先给你说核心问题：你当前的axios请求没有开启流式响应模式，axios会自动帮你把所有分片拼好再交付，所以你拿不到实时的分片数据。下面是具体的修改方案：

1. 调整axios请求配置，开启流式响应 #

在你的请求配置里加上responseType: 'stream'，这是让axios知道你要处理流式响应，而不是等完整结果：

async sendSelectedDocumentList(
    projectId: number,
    selectedDocuments: string[],
  ) {
    const response = await axios.post(
      `/api/projects/${projectId}/thematiques/answer`,
      {
        document_names: selectedDocuments,
      },
      {
        params: { user_id: this.userId },
        responseType: 'stream', // 关键配置：开启流式响应
      },
    );

    // 下面是新增的分片处理逻辑
    const reader = response.data.getReader();
    const decoder = new TextDecoder(); // 把二进制分片转成可读文本

    // 递归读取每个分片
    async function readNextChunk() {
      const { done, value } = await reader.read();
      if (done) {
        console.log('所有分片都接收完啦～');
        return;
      }
      // 把二进制分片解码成字符串，stream: true 是为了处理跨分片的多字节字符，避免乱码
      const chunkContent = decoder.decode(value, { stream: true });
      console.log('刚收到的分片内容：', chunkContent);
      // 继续读取下一个分片
      await readNextChunk();
    }

    // 启动分片读取
    await readNextChunk();

    return response;
  }

2. 关键细节说明 #

• responseType: 'stream'：告诉axios不要自动拼接响应，直接返回浏览器原生的ReadableStream对象，这样我们就能手动读取每个分片。
• TextDecoder：因为流式响应的分片是二进制格式的，需要转成我们能看懂的文本，{ stream: true }这个参数一定要加，它会处理那种“一个多字节字符被拆在两个分片里”的情况，避免出现乱码。
• 递归读取：通过reader.read()不断获取下一个分片，直到done为true（所有分片接收完成）。

这样改完之后，你就能在每个分片到达的第一时间，在控制台看到实时打印的内容了，和你在网络面板里看到的分片节奏完全同步～

备注：内容来源于stack exchange，提问作者F4L4X