How to deal with the failure of network request in vue?

scenario requirements:

4:"" 

several related files:
/ components/findlist.vue; / store/modules/find.js; / fetch/api.js
find.js calls api.js

problem description:
because each scenario needs to be used, so focus on this requirement and think of

in / fetch/api.js
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;
let loading=0;
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
    var config = err.config;
    if(!config || !config.retry) return Promise.reject(err);
    config.__retryCount = config.__retryCount || 0;
    if(config.__retryCount >= config.retry) {
       loading=1;
       return Promise.reject(err);
    }
    config.__retryCount += 1;
    
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    });
    return backoff.then(function() {
        return axios(config);
    });
});



I have set an identity loading, that becomes 1 once more than four times, but when the loading becomes 1, it cannot be passed to / store/modules/find.js, let alone / components/findlist.vue, so the effect cannot be achieved.

ps: in api.js "s export default {loading}, the variable loading can only get out when it is called, and then the assignment in the intercept function will not be able to get out.

Mar.17,2021

do you want / store/modules/find.js and / components/findlist.vue to know about the changes in loading?
do you use vuex? You can make the loading variable globally accessible so that if any file changes the variable, other files will also get the changed value.

Menu