axios攔截器處理程序如何在其創建方法正在調用axios.get的內部訪問vue組件實例（此指針）？

Question

Axios是一個很棒的庫，能夠在瀏覽器和節點環境中執行ajax。 vuejs是用於基於組件的Web開發的出色框架。 通常，對於vue組件，使用axios啟動ajax操作是非常好的。 根據https://github.com/imcvampire/vue-axios ，我們可以使用以下代碼集成vue和axios。

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.prototype.$http.interceptors.request.use(function(request){
    // I want to access the vuecomponent instance here, how can i do that??
    console.log((this.$options._componentTag ? (this.$options._componentTag+ 
   ' of '+ (this.$parent.$options._componentTag? 
   this.$parent.$options._componentTag:'root')): 'root component')+ ' for 
   url: ' 
   +request.url+ ' body: '+JSON.stringify(request.body))
}
   return request
},function(error){ return Promise.reject(error)});
// normally, following code will be run within vue component created hook 
   method, this represent the vuecomponent, $http is axio
this.$http.get(api).then((response) => {
   console.log(response.data)
})

而且，我想知道在哪個vue組件中執行ajax操作。 因此，我使用攔截器來解決該問題。 不幸的是，該指針不代表vue組件，我該如何實現呢？

Answer 1

我不使用vue-axios庫，但是您可以通過使用vue mixin來實現它，例如以下示例：

let httpMixin = {
  methods: {
    get: function (url) {
      // You can access `this` here
      // ...

      return this.$http.get(url)
    }
  }
}

new Vue({
  mixins: [httpMixin],
  created: function () {
      // Use mixin methods instead $http
      this.get('/api/xyz').then(...)
  }
})

只是使其更具可重用性：'）

Answer 2

軟件包/插件vue-axios不是我的最愛。 如果您使用google vue axios這是第一個結果。 我認為這是它受歡迎的主要原因。 但這是另一種選擇。 我們只是使用原始Axios庫覆蓋Vue.prototype.$http和Vue.prototype.axios

您不需要使用vue-axios ：

Vue.prototype.$http = axios;
Vue.prototype.axios = axios;

如我們所見，自行編寫整個功能所需的行數與配置插件所需的行數相同。

 const api = 'https://dog.ceo/api/breeds/list/all'; let childComp; Vue.prototype.$http = axios; Vue.prototype.axios = axios; childComp = { template: '<div><p>{{msg}}</p></div>', created() { console.log('child created'); this.$options._componentTag = 'tag-1'; this.$parent.$options._componentTag = 'parent-tag-1'; }, mounted() { console.log('child mounted'); }, data() { return { msg: 'Hello Vue', } }, } Vue.mixin({ created() { console.log('parent created'); } }) const app = new Vue({ el: '#app', render: h => h(childComp), methods: { load: function() { app.$http.interceptors.request.use(function(request) { //console.log(app.$options.components); // I want to access the vuecomponent instance here, how can i do that?? let name = app.$options._componentTag; console.log(name); let parentName = app.$root.$options._componentTag; console.log('C'); console.log( (name ? (name + ' of ' + (parentName ? parentName : 'root')) : 'root component') + ' for url: ' + request.url + ' body: ' + JSON.stringify(request.body)); return request; }, function(error) { return Promise.reject(error) }); // normally, following code will be run within vue component created hook // method, this represent the vuecomponent, $http is axios app.$http.get(api).then((response) => { //console.log(response.data); }); }, }, }); app.load(); var Ctor = Vue.extend({ name: 'cool-stuff' }); var vm = new Ctor(); // console.log(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script> <div id="app"></div>