Know if there is a pending request in axios

Question

I am new to ReactJS and for my ajax call I tried using the Axios library . This is awesome, but now I would like to know if there is a way to find out if there are pending requests in the axios interceptor, because I would like to show the overlay load every ajax call (if it is not already visible) and remove the overlay when ALL promise is resolved. While I started working with the interceptor:

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

And I would like to add something like this:

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

So, how, (if possible) to know if he is the last answer? Before using ReactJs, I used Angular 1.x, and in $http servicewas

$http.pendingRequests

Is there something like $ http service in axioms?

Answer 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) {
    return Promise.reject(error);
});