在 FastAPI 中实现流式响应数据输出，通常依赖于 `StreamingResponse` 类，它允许将生成器函数的结果以流式的方式发送给客户端。流式传输特别适用于需要逐步返回大量数据或实时生成内容的场景，例如聊天机器人、日志输出或文件下载。 为了实现流式输出，并在前端使用 Axios 接收和解析流式数据，可以按照以下步骤进行。 ### 后端实现：使用 `StreamingResponse` 流式输出 FastAPI 提供了基于 Server-Sent Events (SSE) 协议的流式响应支持。可以通过一个生成器函数逐步生成内容，并将其包装在 `StreamingResponse` 中返回。 ```python from fastapi import FastAPI from fastapi.responses import StreamingResponse import asyncio app = FastAPI() async def generate_stream(): for i in range(1, 6): yield f"data: Chunk {i}\n\n" await asyncio.sleep(1) # 模拟延迟 @app.get("/stream") async def stream_data(): return StreamingResponse(generate_stream(), media_type="text/event-stream") ``` 上述代码定义了一个 `/stream` 路由，它通过 `generate_stream` 生成器逐步返回数据块，并使用 `StreamingResponse` 将其以 `text/event-stream` 的媒体类型发送给客户端。 ### 前端实现：使用 Axios 接收和解析流式数据 Axios 本身并不直接支持处理流式数据，尤其是 Server-Sent Events (SSE) 格式。因此，前端推荐使用 `EventSource` 或第三方库如 `fetch-event-source` 来接收流式响应。 #### 使用 `fetch-event-source` 库（推荐） ```javascript import { fetchEventSource } from '@microsoft/fetch-event-source'; async function startStream() { let accumulatedData = ''; await fetchEventSource('/api/stream', { method: 'GET', headers: { 'Content-Type': 'application/json', }, onMessage(event) { accumulatedData += event.data; console.log('Received chunk:', event.data); // 可以更新 UI 或状态管理器 }, onError(err) { console.error('Stream error:', err); } }); console.log('Full response:', accumulatedData); } ``` #### 使用原生 `EventSource`（适用于简单场景） ```javascript const eventSource = new EventSource('/api/stream'); eventSource.onmessage = function(event) { console.log('Received:', event.data); }; eventSource.onerror = function(err) { console.error('EventSource failed:', err); }; ``` ### 跨域与请求头注意事项 如果前端和后端不在同一个域下，需要配置 CORS 中间件以允许跨域请求，并确保允许流式响应所需的头部信息。 ```python from fastapi.middleware.cors import CORSMiddleware app.add_middleware( CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) ``` 此外，确保在响应中设置正确的 `Cache-Control` 头部，以防止浏览器缓存干扰流式数据。 ### 总结 通过 `StreamingResponse` 实现流式响应，结合前端 `fetch-event-source` 或 `EventSource`，可以有效实现后端流式输出和前端实时接收。该方案适用于聊天应用、日志推送、文件流传输等多种场景。 ---