Аксиос Аякс, показать загрузки при AJAX-запрос

Аксиос Аякс, показать загрузки при AJAX-запрос

09.06.2018 12:35:08 Просмотров 35 Источник

В настоящее время я создаю приложение 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();
});
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/50768678/axios-ajax-show-loading-when-making-ajax-request#comment88545556_50768678
Перехватчики могут использоваться глобально или только для некоторых запросов, если вы хотите (просто создайте экземпляр с ними и используйте этот экземпляр только тогда, когда вы хотите, чтобы запрос изменил статус загрузки). Но... Я не уверен в концепции того, чтобы каждый запрос включал и выключал статус загрузки. В некоторых случаях может потребоваться выполнить несколько запросов одновременно. Если один из них работает быстрее, чем другой, он установит статус загрузки в false, в то время как другой все еще находится в ожидании. Может быть, это и не проблема в вашем случае, но это важно учитывать.
https://stackoverflow.com/questions/50768678/axios-ajax-show-loading-when-making-ajax-request#comment88545928_50768678
Существует ли более общий способ определения наличия ожидающих запросов?

Ответы - Аксиос Аякс, показать загрузки при AJAX-запрос / Axios ajax, show loading when making ajax request

Shahar

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>

Является ответом!
tony19

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

демонстрация

https://stackoverflow.com/questions/50768678/axios-ajax-show-loading-when-making-ajax-request/50769609#comment101811226_50769609
Это было именно то, что я искал, спасибо!
Davod Aslanifakor

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 и магазина

Закрыть X