axios拦截器处理程序如何在其创建方法正在调用axios.get的内部访问vue组件实例（此指针）？

Question

Axios is a great library capable of doing ajax both in browser and in node environment. vuejs is a great framework used for component based web development. Normally, it is excellent for a vue comonent to use axios to launch ajax operation. According to https://github.com/imcvampire/vue-axios , we can use following code to integrate vue and 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)
})

and, also, i'd like to know in which vue component the ajax operation is being executed. So, i use the interceptors to address that problem. Unfortunately, this pointer does not represent the vuecomponent, how can i implement that?

Answer 1

I don't use vue-axios library, but you can implement it by using vue mixin like sample below:

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(...)
  }
})

Just make it more reusable :')

Answer 2

The package/plugin vue-axios is not my favorite. If you google vue axios it's the first result. And I think that's the main reason of it's popularity. But this is an alternative. We just override the Vue.prototype.$http and Vue.prototype.axios using the original Axios Library

You don't need to use vue-axios :

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

As we can see it takes the same amount of lines to write the whole functionality ourselves as it takes to configure the plugin.

 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>