Axios AJAX, показать загрузку при выполнении AJAX-запроса

Question

В настоящее время я создаю приложение Vue, и я использую Axios.У меня есть значок загрузки, который я показываю перед каждым вызовом, и скрываю после.

Мне просто интересно, есть ли способ сделать это глобально, поэтому мне не нужно писать значок загрузки / показа загрузки при каждом вызове?

Вот код, который у меня есть сейчас:

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 "перехватчики", но я не знаю, находятся ли они на глобальном уровне или на каждомcall.

Я также видел этот пост для решения jquery, хотя не уверен, как реализовать его на vue:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Answer 1

Я бы настроил перехватчики 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);
    }
  }
}

демо

Answer 2

Я думаю, что вы находитесь на правильном пути с событием отправки, когда ajax-вызов начинается и заканчивается.

Я думаю, вы можете сделать это, перехватив вызов XMLHttpRequest с помощью перехватчиков axios, например:

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>