代码之家 › 专栏 › 技术社区 › Brad

Axios AJAX,发出AJAX请求时显示加载

axios vuejs2 vue.js javascript

4

Brad · 技术社区 · 7 年前

我正在使用Axios构建Vue应用程序和IM。我有一个加载图标,在每次调用之前显示,之后隐藏。

我只是想知道是否有一种方法可以在全球范围内做到这一点,这样我就不必在每次通话时都写下“显示/隐藏加载”图标?

这是我现在掌握的代码:

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

2 回复 | 直到 7 年前

1

14

tony19 thanksd 7 年前

我会安排 Axios interceptors 在根组件的 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);
    }
  }
}

demo

2

4

Shahar 7 年前

我认为当ajax调用开始和结束时,您对dispatch事件的处理是正确的。

我认为你可以用AXIOS拦截器拦截XMLHtpRestQuestCase:

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>