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
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;
});
},