【Vue Spinner】 如何在axios拦截器中使用vue-spner?

你可以使用Vue实例的event bus来实现。

首先在eventhub.js创建一个Event Bus Vue实例

export const eventHub = new Vue();

其次在Axios模块中通过拦截器激发事件

import { eventHub } from 'eventhub'

function createAxios() {
    const axios = Axios.create({ ... });
    axios.interceptors.request.use(
        conf => {
            eventHub.$emit('before-request');
            return conf;
        },
        error => {
            eventHub.$emit('request-error');
            return Promise.reject(error);
        }
    );
    axios.interceptors.response.use(
        response => {
            eventHub.$emit('after-response');
            return response;
        },
        error => {
            eventHub.$emit('response-error');
            return Promise.reject(error);
        }
    );
    return axios;
}

最后，在App.vue中监听相关事件

import { eventHub } from 'utils/eventhub'

export default {
    data () {
        return { spinnerVisible: false }
    },
    methods: {
        showSpinner() {
            console.log('show spinner');
            this.spinnerVisible = true;
        },
        hideSpinner() {
            console.log('hide spinner');
            this.spinnerVisible = false;
        }
    },
    created() {
        eventHub.$on('before-request', this.showSpinner);
        eventHub.$on('request-error',  this.hideSpinner);
        eventHub.$on('after-response', this.hideSpinner);
        eventHub.$on('response-error', this.hideSpinner);
    },
    beforeDestroy() {
        eventHub.$off('before-request', this.showSpinner);
        eventHub.$off('request-error',  this.hideSpinner);
        eventHub.$off('after-response', this.hideSpinner);
        eventHub.$off('response-error', this.hideSpinner);
    }
}

可以这样使用：

<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>

data () {
  return {
    loading : true
   }
},

methods: {
  getSomething () {
    axios.get('/api').then(res => {
      if(res.data) {
        ...
        this.loading = false
      }
    }).catch(err => {
      if(err.msg) {
        ...
        this.loading = false
      }
    })
  }
}