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

Question

我担心在 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));
    }
  };
}, []);

Answer 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,
  }));
 }));