如何正确使用axios.interceptor？

Question

我使用vue-cli，这是我的main.js.In Vue的单一文件组件结构的一部分，我使用axios代替ajax。

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

它通过参考(this.axios)使axios在每个证监会中都可用。但是当我尝试使用axios.interceptor时，我遇到了一个恼人的问题。我想为整个项目设置axios.interceptor.request和axios.interceptor.reponse。但是，我只能在一个文件组件中使用this.axios.interceptor.request，而且它只能在这个文件中工作。这是App.js的零件代码。

  methods: {
    // interceptor
    setAxiosInterceptor () {
      this.axios.interceptors.request.use(config => {
        this.cover = true
        return config
      }, error => Promise.reject(error)
      )
      this.axios.interceptors.response.use(response => {
        this.cover = false
        return response
      }, error => {
        this.cover = false
        return Promise.reject(error)
      })
    },

我必须在每个证监会中设置this.axios.interceptor。因此，我如何为整个项目设置axios.interceptor，并使其在每个证监会中都可用。

Answer 1

在Vue组件中，创建方法setAxiosInterceptor()的作用域是该组件的本地范围。根组件方法可以使用vm.$root别名公开给子组件。

在这种情况下，更好的方法不是创建方法setAxiosInterceptor()，而是使用Vue组件created: lifecycle hook

将axios.interceptor.request和axios.interceptor.reponse全局调整为App.vue的步骤

<script>
import axios from "axios";
export default {
    ...

    methods: {},
    created: function () {

    axios.interceptors.request.use(config => {
        this.cover = true
        return config
      }, error => Promise.reject(error)
      )
      axios.interceptors.response.use(response => {
        this.cover = false
        return response
      }, error => {
        this.cover = false
        return Promise.reject(error)
      })
    }

    ...
};
</script>

main.js中的以下代码行不是实现此特定结果所必需的。

import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)