menu

Questions & Answers

How to stop loading on interceptor.r axios.interceptors.request in ionic vue?

I am following this tutorial.

https://www.djamware.com/post/5fc19e3e77862f22905c7f03/ionic-5-tutorial-oauth2-login-example-vue

in this tutorial he is calling this function which calls on every axios request

mountRequestInterceptor() {
        this._requestInterceptor = axios.interceptors.request.use(async config => {
            console.log("show loading");
            const loading = await loadingController.create({
                message: 'Please wait...'
            });
            await loading.present();
           
                
           
            
            return config;
        });
        console.log(this._requestInterceptor,'sasdas')
    },

Problem is loading starts on axios request but never stops.

I want it to stop when request is successfull

Answers(2) :

I'm not sure what's the problem with your code, but I don't see where is _interceptors.response.

I made the same functionality to have a global loader. I started it in _interceptors.request and turned it off in _interceptors.response.

maybe this blog will help you

https://codeburst.io/global-loader-component-using-vue-js-and-axios-interceptors-3880a136a4ac

Yes I also have the same problem, how to fix it you just need to add a function to check whether the loadingController is still running or not.. the problem is why the loading doesn't want to stop because the function adds another loadingController when processing data,

You can add this function to check whether the loadingController is still running or not

const checkLoading = await loadingController.getTop();

So you can change the function to be like this,

mountRequestInterceptor() {
        this._requestInterceptor = axios.interceptors.request.use(async config => {
            const checkLoading = await loadingController.getTop();
            if (!checkLoading) {
                console.log("show loading");
                const loading = await loadingController.create({
                    message: 'Please wait...'
                });
                await loading.present();
            }
            return config;
        });
    },