vue2.0基于vuex、axios拦截器实现loading效果

1.在main.js中先引入axios、qs以及引进vuex
import axios from “axios”
import qs from “qs”
import store from "./vuex"
2.在main.js中设置全局axios

//全局axios
axios.defaults.timeout = 15000; //请求超时时间  发送请求后，多长时间还没有收到请求答复，就超时报错
Vue.prototype.$ajax = axios;//将axios请求挂载到 Vue.prototype上，将axios改写为vue的原型属性，在原型上定义它们使其在每个 Vue 的实例中可用。
Vue.prototype.$qs = qs;

3.定义一个拦截器和一个响应拦截器

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

在这里可以看到其中有vuex中store.state的数据代码
4.在vuex中修改store.state的数据

import Vue from "vue";
import vueX from "vuex";
Vue.use(vueX);

var store=new vueX.Store({      
        state{
            //状态
            loadding:false
        }，
        mutations：{
            //loadding状态修改方法
            //store.commit()调用
            showloadding(state, load) {
                  state.loadding = load;
            },
        }，
})
//！！！导出store 
export default store

5.然后需要一个显示在页面的loadding
我这里用的是vant的loadding
在App.vue中将vant的loadding代码和router-view写在一起这样在路由跳转时没有请求到数据之前都会显示loadding加载中
自定义loadding样式及显示位置
App.vue

<template>
  <div class="app">
    <van-loading size="24px" vertical v-if="this.$store.state.loadding" class="jiazai">加载中...</van-loading>
    <router-view />
  </div>
</template>