如何在服务器端呈现的 React 应用程序中构造多个 HTTP 请求？

Posted 2023-02-22

【中文标题】如何在服务器端呈现的 React 应用程序中构造多个 HTTP 请求？

【英文标题】：How to structure multiple HTTP requests in a server-side rendered React app?

【发布时间】：2017-03-02 21:23:12

【问题描述】：

我目前正在使用下面的服务器端渲染逻辑（使用reactjs + nodejs +redux）第一次同步获取数据并将其设置为存储中的初始状态。

fetchInitialData.js

  export function fetchInitialData(q,callback)
      const url='http://....'
      axios.get(url)
          .then((response)=>
              callback((response.data));
          ).catch((error)=> 
            console.log(error)
      )
  

我异步获取数据并加载输出以存储页面第一次加载时使用回调。

handleRender(req, res)
 fetchInitialData(q,apiResult => 
    const data=apiResult;
    const results =data,fetched:true,fetching:false,queryValue:q
    const store = configureStore(results, reduxRouterMiddleware);
     ....
    const html = renderToString(component);
    res.status(200);
    res.send(html);
    )

我需要在初始页面加载时进行 4 到 5 次 API 调用，因此我想检查是否有一种简单的方法可以在页面加载时进行多次调用。

我是否需要链接 api 调用并手动合并来自不同 API 调用的响应并将其发送回以加载初始状态？

更新 1： 我正在考虑使用 axios.all 方法，有人可以告诉我这是否是一种理想的方法吗？

【问题讨论】：

在使用 Promise.all 方法时要小心，因为您提出了多个请求，如果一个 Promise 被撤销，那么所有请求都会被撤销。

这可能不是您立即需要的，但如果您可以访问该层并且在您的项目中足够早，GraphQL 可能会解决这些类型的问题。 graphql.org

【参考方案1】：

您希望确保请求并行发生，而不是按顺序发生。

我之前通过为每个 API 调用创建一个 Promise 解决了这个问题，并使用axios.all() 等待所有这些调用。下面的代码是 基本上是伪代码，我以后可以深入研究更好的实现。

handleRender(req, res)
  fetchInitialData()
    .then(initialResponse => 
      return axios.all(
        buildFirstCallResponse(),
        buildSecondCallResponse(),
        buildThirdCallResponse()
      )
    )
    .then(allResponses => res.send(renderToString(component)))


buildFirstCallResponse() 
  return axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .catch(err => console.error('Something went wrong in the first call', err))
    .then(response => response.json())

注意所有响应是如何捆绑到一个数组中的。

Redux 文档稍微介绍了服务器端渲染，但您可能已经看过了。 redux.js.org/docs/recipes/ServerRendering

还可以查看 Promise 文档以了解 .all() 的确切作用。developer.mozilla.org/en/docs/Web/javascript/Reference/Global_Objects/Promise/all

如果有什么不清楚的地方请告诉我。

【参考方案2】：

您可以尝试express-batch 或GraphQL 是另一种选择。

【参考方案3】：

您还可以使用 Redux-Sagas 使用纯 Redux 操作来触发多个 api 调用并使用纯操作处理所有这些调用。 Introduction to Sagas