Javascript Axios ajax，发出ajax请求时显示加载

我目前正在使用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();
});

---

我认为，在ajax调用start和finish时，使用dispatch事件是正确的

我认为您可以使用axios拦截器拦截XMLHttpRequest调用，如下所示：

axios.interceptors.request.use（函数（配置）{
//在发送请求之前做些什么
log（'Start Ajax调用'）；
返回配置；
}，函数（错误）{
//处理请求错误
console.log（'Error'）；
返回承诺。拒绝（错误）；
});
axios.interceptors.response.use（函数（响应）{
//处理响应数据
log（'donewithajax调用'）；
返回响应；
}，函数（错误）{
//处理响应错误
log（“获取数据时出错”）；
返回承诺。拒绝（错误）；
});
函数getData（）{
常量url=https://jsonplaceholder.typicode.com/posts/1';
get（url）.then（（数据）=>console.log（'requestdata'）；
}
函数failToGetData（）{
常量url=https://bad_url.com';
get（url）.then（（数据）=>console.log（'requestdata'）；
}

获取数据
错误

我将在根组件创建的

生命周期挂钩（例如
App.vue
）中设置：

由于您可能有多个并发Axios请求，每个请求的响应时间不同，因此您必须跟踪请求计数以正确管理全局加载状态（每个请求递增，每个请求解析时递减，计数达到0时清除加载状态）：

适用于带有

模块：['@nuxtjs/axios'，…]

插件/axios.js
store/index.js
此示例附带$axios和store
的令牌检查，拦截器可以全局使用，也可以仅用于某些请求（仅用于它们，并且仅在需要更改加载状态的请求时使用此实例）。但是我不确定让每个请求打开和关闭加载状态的概念。在某些情况下，您可能希望同时运行多个请求。如果其中一个比另一个快，它会将加载状态设置为false，而另一个仍处于挂起状态。在您的情况下可能不是问题，但重要的是要考虑。是否有一种更通用的方法来检测是否有任何待处理的请求。可能还有其他的方法，但我能想到的是在您的商店中有一个挂起的请求计数器（或者在其他地方，例如初始化AXIOS）。将其初始化为零，每次启动请求时，向其添加
1
，并将加载状态设置为
true
。请求完成后（解决或拒绝），减去
1
，仅当计数器等于
0
，才将加载状态设置为
false
。
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);
  });
}

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

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


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