如何在React中使用useEffect钩子调用多个不同的apis
如何在React中使用useEffect钩子调用多个不同的apis
提问于 2021-09-20 23:59:00
我对在useEffect钩子中使用axios调用apis有一个顾虑。例如，我有一个react页面，在那里我显示了所有的寄售清单。寄售可以具有来自用户列表的用户、来自承运商列表的承运商、来自帐户列表的帐户、来自状态列表的状态和来自服务列表的服务。所有这些列表都是枚举数据。所以，在这个页面中，我必须在呈现页面之前获得所有枚举列表，因为在react组件中，我必须将它们显示为dropdown，以便用户可以在其上应用过滤器。但是要获得这些枚举数据的列表，我必须调用单独的api。例如，获取用户我必须调用/users接口，获取客户我必须调用/customers接口。我担心的是，我是否需要使用一个使用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
Stack Overflow用户
发布于 2021-09-21 16:58:26
您可以使用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,
}));
}));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69261990
复制相关文章
相似问题
腾讯云开发者
