vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳

首先新建一个 loading.vue组件，写loading动画效果

在vuex中写一个状态来操控我的loading组件显示隐藏

  export const store = new Vuex.Store({
      state:{
          isShow:false
       }
  })

Axios拦截器配置 在main.js中

分别定义一个请求拦截器（请求开始时执行某些操作）、响应拦截器（接受到数据后执行某些操作），之间分别设置拦截时执行的操作，改变state内isShow的布尔值从而控制loading组件在触发请求数据开始时显示loading，返回数据时隐藏loading

    axios.interceptors.request.use(function(config){
      store.state.isShow=true; //在请求发出之前进行一些操作
      return config
  })
//定义一个响应拦截器
    axios.interceptors.response.use(function(config){
    store.state.isShow=false;//在这里对返回的数据进行处理
    return config
  })

在app.vue中引入我的loading组件