如何在 React 中使用 useEffect 挂钩调用多个不同的 api

Posted 2023-03-17

【中文标题】如何在 React 中使用 useEffect 挂钩调用多个不同的 api

【英文标题】：How to call multiple different apis using useEffect hook in React

【发布时间】：2021-11-14 14:35:57

【问题描述】：

我担心在 useEffect 挂钩中使用 axios 调用 api。例如，我有一个反应页面，我在其中显示所有寄售清单。托运可以有用户列表中的用户、承运人列表中的承运人、帐户列表中的帐户、状态列表中的状态和服务列表中的服务。所有这些列表都是枚举数据。因此，在这个页面中，我必须在渲染页面之前获取所有枚举列表，因为在反应组件中，我必须将它们显示为下拉列表，以便用户可以在此之上应用过滤器。但是要获取那些枚举数据的列表，我必须调用单独的 api。例如，获取用户我必须调用 /users api，获取客户我必须调用 /customers api。我担心的是我是否需要使用 axios 使用单个 useEffect 挂钩来调用它们。因为我必须多次访问服务器才能获取这些枚举数据。如果枚举数据列表的数量增加，那么我对服务器的 api 请求也会增加。我不知道处理这种情况的最佳做法是什么。是创建单个api，只命中一次服务器，返回所有枚举数据，还是有单独的api，命中服务器请求单独获取枚举数据。多次访问服务器以获取枚举数据是否会影响客户端的性能，我的意思是一些内存泄漏？只是需要一些建议。提前致谢。

useEffect(() => 
  const loadData = async () => 
    try 
      dispatch(getLoad(true));
      const services = await Axios.get("/Services");

      const customers = await Axios.get("/Accounts/Customers");

      const resCarrier = await Axios.get("/Accounts/Carriers");

      const resStatuses = await Axios.get("/Status");

      setFilterData((prev) => (
        ...prev,
        services: services.data,
        customers: customers.data,
        carriers: resCarrier.data,
        statuses: resStatuses.data,
      ));
      dispatch(getLoad(false));
     catch (error) 
      dispatch(getLoad(false));
    
  ;
, []);

【参考方案1】：

您可以使用axios.all

axios.all([
   axios.get(`/Services`), 
   axios.get(`/Accounts/Customers`),
   axios.get(`/Accounts/Carriers`),
   axios.get(`/Status`)
 ])
 .then(axios.spread((services, customers, carriers, status) => 
   setFilterData((prev) => (
    ...prev,
    services: services.data,
    customers: customers.data,
    carriers: carriers.data,
    statuses: status.data,
  ));
 ));

【讨论】：

感谢您的建议。但它会影响同时从不同端点获取数据的性能吗？或者创建一个返回我需要的所有数据的单个端点，以便服务器只处理一次请求。

很抱歉之前没有回答，但是如果您必须从后端获取信息，它将始终发出该数量的请求，您在前端不会更改 API。如果请求花费的时间太长或前端速度变慢，您必须更改后端以使其加载更快！

非常感谢