Аксиос Аякс, показать загрузки при AJAX-запрос
В настоящее время я создаю приложение vue и использую Axios. У меня есть значок загрузки, который я показываю перед каждым звонком и скрываю после него.
Мне просто интересно, есть ли способ сделать это глобально, чтобы мне не нужно было писать значок загрузки show / hide при каждом вызове?
Вот этот код у меня есть прямо сейчас:
context.dispatch('loading', true, {root: true});
axios.post(url,data).then((response) => {
// some code
context.dispatch('loading', false, {root: true});
}).catch(function (error) {
// some code
context.dispatch('loading', false, {root: true});color: 'error'});
});
Я видел, что в документах axios есть "перехватчики", но я не знаю, находятся ли они на глобальном уровне или на каждом вызове.
Я также видел этот пост для решения jquery, но не уверен, как реализовать его на vue:
$('#loading-image').bind('ajaxStart', function(){
$(this).show();
}).bind('ajaxStop', function(){
$(this).hide();
});
Ответы - Аксиос Аякс, показать загрузки при AJAX-запрос / Axios ajax, show loading when making ajax request
09.06.2018 02:06:38
Я думаю, что вы находитесь на правильном пути с dispatch event, когда ajax call start and finish.
Я думаю, что вы можете сделать это, чтобы перехватить вызов XMLHttpRequest с помощью Axios-перехватчиков, таких как so:
axios.interceptors.request.use(function(config) {
// Do something before request is sent
console.log('Start Ajax Call');
return config;
}, function(error) {
// Do something with request error
console.log('Error');
return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
// Do something with response data
console.log('Done with Ajax call');
return response;
}, function(error) {
// Do something with response error
console.log('Error fetching the data');
return Promise.reject(error);
});
function getData() {
const url = 'https://jsonplaceholder.typicode.com/posts/1';
axios.get(url).then((data) => console.log('REQUEST DATA'));
}
function failToGetData() {
const url = 'https://bad_url.com';
axios.get(url).then((data) => console.log('REQUEST DATA'));
}<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<button onclick="getData()">Get Data</button>
<button onclick="failToGetData()">Error</button>09.06.2018 02:35:13
Я бы настроил перехватчики Axios в createdцикле жизненного цикла корневого компонента (напримерApp.vue):
created() {
axios.interceptors.request.use((config) => {
// trigger 'loading=true' event here
return config;
}, (error) => {
// trigger 'loading=false' event here
return Promise.reject(error);
});
axios.interceptors.response.use((response) => {
// trigger 'loading=false' event here
return response;
}, (error) => {
// trigger 'loading=false' event here
return Promise.reject(error);
});
}
Поскольку у вас может быть несколько одновременных запросов Axios, каждый с различным временем отклика, вам придется отслеживать количество запросов, чтобы правильно управлять глобальным состоянием загрузки (инкремент при каждом запросе, декремент при каждом разрешении запроса и очистить состояние загрузки, когда количество достигает 0):
data() {
return {
refCount: 0,
isLoading: false
}
},
methods: {
setLoading(isLoading) {
if (isLoading) {
this.refCount++;
this.isLoading = true;
} else if (this.refCount > 0) {
this.refCount--;
this.isLoading = (this.refCount > 0);
}
}
}
24.09.2019 06:53:33
Для Nuxt с плагином $axios
модули: ['@nuxtjs/axios', ...]
Плагины / axios.JS
export default ({ app, $axios ,store }) => {
const token = app.$cookies.get("token")
if (token) {
$axios.defaults.headers.common.Authorization = "Token " + token
}
$axios.interceptors.request.use((config) => {
store.commit("SET_DATA", { data:true, id: "loading" });
return config;
}, (error) => {
return Promise.reject(error);
});
$axios.interceptors.response.use((response) => {
store.commit("SET_DATA", { data:false, id: "loading" });
return response;
}, (error) => {
return Promise.reject(error);
})
}
магазин / индекс.JS
export default {
state: () => ({
loading: false
}),
mutations: {
SET_DATA(state, { id, data }) {
state[id] = data
}
},
actions: {
async nuxtServerInit({ dispatch, commit }, { app, req , redirect }) {
const token = app.$cookies.get("token")
if (token) {
this.$axios.defaults.headers.common.Authorization = "Token " + token
}
let status = await dispatch("authentication/checkUser", { token })
if(!status) redirect('/aut/login')
}
}
}
Этот пример сопровождается проверкой токена с помощью $axios и магазина