时间戳

首页 > 解决方案 > axios ajax，发出ajax请求时显示加载

javascript - axios ajax，发出ajax请求时显示加载

问题描述

我目前正在构建一个 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 文档上看到有“拦截器”，但我不知道它们是在全局级别还是在每次调用中。

我还看到了这篇关于 jquery 解决方案的帖子，但不确定如何在 vue 上实现它：

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

标签： javascriptvue.jsvuejs2axios

解决方案

我会在根组件的生命周期钩子（例如）中设置Axios 拦截器：createdApp.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);
    }
  }
}

演示

推荐阅读