biigpongsatorn / vue-element-loading

⏳ Loading inside a container or full screen for Vue.js

Home Page:https://vue-element-loading.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Functions

mhelaiwa opened this issue · comments

Hi, I am using axios interceptors to catch unsuccessful requests. and wonder if there is any function or events that I could call to hide the loading from axios like for example "hide_all_loadings()"?

Currently I am firing a global event from axios interceptor indicating request finishing and listening for it inside each individual component to hide the loading.

It's working very well in global loading. but it would be convenient to add such a feature. It will make code simpler and centralized.

export default {
	data() {
		return {
			loading: false
		}
	},
	created(){
		EventBus.$on('RequestFinished', r =>{ this.loading = false; });
	},
	update() {
		this.loading = true;
		axios.post('/api/citizen/info',{form:this.form}).then(({data}) => {
			this.loading = false;
		});
	}
}
window.axios.interceptors.response.use(axiosSuccessInterceptor, axiosErrorInterceptor);

function axiosSuccessInterceptor(response) {
      EventBus.$emit('RequestFinished', response);
}

function axiosErrorInterceptor(response) {
      EventBus.$emit('RequestFinished', response);
}

This issue is not a problem of Vue-element-loading, It's problem of your data flow or EventBus. Please post the issue in the correct repo.