在我的React.js项目中,我使用axios.interceptors
和useContext
来处理请求加载旋转组件。
当请求开始时,我设置上下文值-showLoading
true
,如果请求完成或出错,则更改为false
。这个功能运行得很好。以下是我的样例代码:
// Request
axios.interceptors.request.use(request => {
setGlobalLoading(true)
return request;
}, error => {
setGlobalLoading(false);
return Promise.reject(error);
});
// Response
axios.interceptors.response.use(response => {
setGlobalLoading(false);
return response;
}, error => {
setGlobalLoading(false);
return Promise.reject(error);
});
然而,我有一个页面,这是一个表,它需要调用每一行的多个API,所有的API返回得如此之快。然后,它会使加载组件“闪烁”。
所以我有了一个想法,我可以设置“只在请求超过1秒时才显示加载”,还是应该设置延迟以关闭加载?(但我不知道如何获取任何挂起的请求,因为这可能会在另一个请求未完成时关闭加载)
回调函数只调用一次,我应该使用上下文还是状态来保存setTimeout
和clearTimeout
函数?或者有什么更好的解决方案来处理这个案子?
1条答案
按热度按时间0g0grzrc1#
您可以创建一个数组来保存请求集。请求通常有一个请求id,您可以使用此请求id。如果您发送请求,则可以将请求推送到数组,最后可以移除该请求。如果显示此数组长度>0加载,则关闭加载