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

Axios是一个强大的库，能够在浏览器和节点环境中执行ajax。vuejs是用于基于组件的web开发的优秀框架。通常，vue组件最好使用axios启动ajax操作。 根据，我们可以使用以下代码来集成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)
})

另外，我想知道ajax操作是在哪个vue组件中执行的。所以，我使用拦截器来解决这个问题。

---

不幸的是，此指针不代表vuecomponent，如何实现它？

我不使用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(...)
  }
})

---

只是让它更易于重用：'）

我不使用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(...)
  }
})

---

让它更具可重用性：）

我不喜欢vue axios的软件包/插件

vue axios

。如果你用谷歌搜索vue axios，这是第一个结果。我认为这是它受欢迎的主要原因。 但这是另一种选择。我们只需使用

您不需要使用

vue axios

：

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

正如我们所见，我们自己编写整个功能所需的行数与配置插件所需的行数相同

const-api='1〕https://dog.ceo/api/breeds/list/all';
让孩子们来吧；
Vue.prototype.$http=axios；
Vue.prototype.axios=axios；
childComp={
模板：“{{msg}
”，
创建（）{
log（'child created'）；
此.$options._componentTag='tag-1'；
此.$parent.$options._componentTag='parent-tag-1'；
},
安装的（）{
console.log（“子安装”）；
},
数据（）{
返回{
msg:“你好，Vue”，
}
},
}
米辛({
创建（）{
log（'parent created'）；
}
})
const app=新的Vue({
el:“#应用程序”，
渲染：h=>h（childComp），
方法：{
加载：函数（）{
应用程序$http.interceptors.request.use（函数（请求）{
//console.log（app.$options.components）；
//我想在这里访问vuecomponent实例，我该怎么做？？
让name=app.$options.\u componentTag；
console.log（名称）；
让parentName=app.$root.$options.\u componentTag；
console.log（'C'）；
console.log(
（名称？（名称+”的“+（父名称？父名称：'根”）：
“根组件”）+，用于url:“+request.url+”正文：“+JSON.stringify（request.body））；
返回请求；
},
函数（错误）{
返回承诺。拒绝（错误）
});
//通常，以下代码将在vue组件中运行
//方法，这表示vuecomponent，$http是axios
app.$http.get（api）.然后（（响应）=>{
//console.log（response.data）；
});
},
},
});
app.load（）；
var Ctor=Vue.extend({
名字：“酷东西”
});
var vm=new Ctor（）；
//控制台日志（vm）
我不喜欢vue axios的软件包/插件。如果你用谷歌搜索vue axios，这是第一个结果。我认为这是它受欢迎的主要原因。
但这是另一种选择。我们只需使用

您不需要使用
vue axios
：

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

正如我们所见，我们自己编写整个功能所需的行数与配置插件所需的行数相同


const-api='1〕https://dog.ceo/api/breeds/list/all';
让孩子们来吧；
Vue.prototype.$http=axios；
Vue.prototype.axios=axios；
childComp={
模板：“{{msg}
”，
创建（）{
log（'child created'）；
此.$options._componentTag='tag-1'；
此.$parent.$options._componentTag='parent-tag-1'；
},
安装的（）{
console.log（“子安装”）；
},
数据（）{
返回{
msg:“你好，Vue”，
}
},
}
米辛({
创建（）{
log（'parent created'）；
}
})
const app=新的Vue({
el:“#应用程序”，
渲染：h=>h（childComp），
方法：{
加载：函数（）{
应用程序$http.interceptors.request.use（函数（请求）{
//console.log（app.$options.components）；
//我想在这里访问vuecomponent实例，我该怎么做？？
让name=app.$options.\u componentTag；
console.log（名称）；
让parentName=app.$root.$options.\u componentTag；
console.log（'C'）；
console.log(
（名称？（名称+”的“+（父名称？父名称：'根”）：
“根组件”）+，用于url:“+request.url+”正文：“+JSON.stringify（request.body））；
返回请求；
},
函数（错误）{
返回承诺。拒绝（错误）
});
//通常，以下代码将在vue组件中运行
//方法，这表示vuecomponent，$http是axios
app.$http.get（api）.然后（（响应）=>{
//console.log（response.data）；
});
},
},
});
app.load（）；
var Ctor=Vue.extend({
名字：“酷东西”
});
var vm=new Ctor（）；
//控制台日志（vm）

您需要这些信息的确切目的是什么？通常，api逻辑应该与组件解耦，您可以通过vuex将收集到的任何数据以反应方式传递回组件。@bodo，在一个复杂的spa中有很多ajax请求。在某些情况下，我想知道哪个请求是由哪个组件启动的。这并不能真正回答我的问题。你为什么需要这些信息？@bodo，我不确定我是否完全理解你的问题。正如我提到的，在调试模式下，我想注销所有ajax请求日志，包括：针对哪个vue组件启动ajax的数据的url。在此之前，vue资源在这方面工作得非常好，不幸的是，