如何使用 FastAPI + React 逐步加载 JSON 响应

Question

我有一个问题，我有一个返回 JSON 对象列表的 FastAPI 端点。 API 有时可能会变慢，但我希望响应能够流式传输，以便在可用时立即由 React 前端呈现。

我可以想到两种方法。

1. 使用

   Server-Sent-Events

   。这可以与 sse-starlette 一起使用。问题是涉及到两个后端API。我有一个生成 JSON 结果的微服务 API 和一个与微服务连接的后端 API，该微服务仅对用户请求进行身份验证并将响应转发回来。如果我在微服务 API 上使用 SSE，我将必须在后端使用另一个 SSE 客户端来拦截并重新发送 SSE 事件。

2. 使用

   StreamingResponse

   。这很好，因为我可以从微服务返回 StreamingResponse 并逐行读取该响应并将其从后端流式传输回来。唯一的问题是内容以字节为单位，我必须解析字节流来识别各个 JSON 对象。

基本上，我想一一生成每个结果对象，并使它们可供我的前端逐步渲染。

我不反对这些想法或更好的选择（如果有的话）。这篇文章的目的是了解如何实现这一点，因为我在任何地方都找不到明确的答案。

任何帮助将不胜感激。

Answer 1

首先我会检查是否真的需要流媒体。为什么“API 有时可能会变慢”？例如，如果从后端到微服务的调用很慢，最好将它们合并到单个服务器中以消除开销。

如果你确实需要它，因为生成列表很慢或者列表太大，我建议分页。基本上，React 前端将首先询问并渲染列表的第一部分，然后是第二部分，依此类推。每个部分都是一个单独的 API 调用。如果您愿意，您可以使用像 fastapi-pagination 这样的库。

StreamingResponse 对我来说似乎更复杂，而且我对 Server-Sent-Events 不熟悉。

免责声明：我主要使用 Javascript 和 PHP。我过去用过Python，但从未用它做过API。