使用vue中的axios后，对实例中的data进行赋值的问题

最新推荐文章于 2025-06-05 09:20:49 发布

原创最新推荐文章于 2025-06-05 09:20:49 发布 · 9.3k 阅读

17 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

67 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

探讨在Vue项目中使用Axios进行前后端数据交互时遇到的this上下文问题，解析错误原因并提供两种解决方案：通过属性绑定或箭头函数解决回调中this为undefined的状况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一下我遇到的一个纠结很久的问题。

在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性：

执行后前端报错：

原因：

在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。

解决方案：

一）将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性

二）使用箭头函数

补充：箭头函数的this

由于箭头函数不绑定this，他会捕获其所在（即定义的位置）上下文的this值，作为自己的this值；

1.在回调函数中：

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 此时的this指向了构造函数新生成的对象
        this.age++;
    }, 3000);
}

var p = new Person();
function Person() {  
    this.age = 0;  
    setInterval(function(){
        //此时的this，指向全局的window对象
        console.log(this)
    }, 3000);
}

var p = new Person();

2.call（）/apply()/bind()方法对于箭头函数来说只是传入参数，对它的this毫无影响；

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function inFun(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3，其内部的this并没有因为call() 而改变，其this值仍然为函数inFun的this值，指向对象adder

3.因为this是词法层面上的，所以严格模式中与this相关的规则都将被忽略（可以忽略是否在严格模式下的影响）

var f = () => {'use strict'; return this};
var p = () => { return this};
console.log(1,f() === window);
console.log(2,f() === p());
//1 true
//2 true

4.以上的箭头函数都是在方法的内部，是以费方法的方式使用的，如果将箭头函数当做一个方法使用：

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}

可以看到。作为方法的箭头函数this指向全局window对象，而普通函数则指向调用他的对象