axios配合vux 全局展示Loading

用ant-design-vue 中的spin 不会用。使用vux曲线救国了

在入口文件main.js中: 引入vux 中的loading 插件式引入

import { LoadingPlugin } from 'vux'
Vue.use(LoadingPlugin)

api中的index.js（vux的使用关键代码）：

import Vue from 'vue'
function startLoading(options) {
    Vue.$vux.loading.show({
      text: 'Loading'
    })
}

axios请求拦截和响应拦截

let base = '';
let loadingRequestCount = 0; 

function startLoading(options) {
    Vue.$vux.loading.show({
        text: 'Loading'
    })
}
function endLoading() {
    Vue.$vux.loading.hide();
}
export function showLoading(options) {
    if (loadingRequestCount === 0) { //多个请求只展示一个loading
        startLoading(options)
    }
    loadingRequestCount++
}
export function closeLoading() {
    if (loadingRequestCount <= 0) {
        return;
    }
    loadingRequestCount--
    if (loadingRequestCount === 0) {
        endLoading()
    }
}

//添加一个请求拦截器
axios.interceptors.request.use(
    config => {
        if(config.method == 'post' ){
            showLoading(config);
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
);
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
    if (response.config.method == 'post' ) {
        closeLoading();
    }
    return response;
}, function (error) {
    endLoading();
    // Do something with response error
    return Promise.reject(error);
});