知道 axios 中是否有待处理的请求

IT技术 ajax reactjs axios
2021-05-23 14:36:50

我是 ReactJS 的新手，对于我的 ajax 调用，我尝试使用Axios库。太棒了，但现在我想知道是否有办法知道 axios 拦截器中是否有待处理的请求，因为我想显示每个 ajax 调用的加载覆盖（如果它尚未可见）并在所有情况下删除覆盖Promise已解决。现在我从拦截器开始开发：

axios.interceptors.request.use(function (config) {
    //here logi of show loading
    return config;
}, function (error) {
    return Promise.reject(error);
});

我想添加如下内容：

axios.interceptors.respose.use(function (config) {
    //logic remove loading if it is last response
    return config;
}, function (error) {
    return Promise.reject(error);
});

那么如何（如果可能）知道它是否是最后的响应？在使用 ReactJs 之前，我使用了 Angular 1.x 并且在$http service那里

$http.pendingRequests

axios 中有类似 $http 的服务吗？

1个回答

这是我的解决方案:)

var numberOfAjaxCAllPending = 0;

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    numberOfAjaxCAllPending++;
    // show loader
    return config;
}, function (error) {
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    numberOfAjaxCAllPending--;
    console.log("------------  Ajax pending", numberOfAjaxCAllPending);

    if (numberOfAjaxCAllPending == 0) {
        //hide loader
    }
    return response;
}, function (error) {
    numberOfAjaxCAllPending--;
    if (numberOfAjaxCAllPending == 0) {
        //hide loader
    }
    return Promise.reject(error);
});
其它你可能感兴趣的问题
上一篇如何处理react+react-router+通量中的查询参数 下一篇第一层后底部皮肤的膨胀