使用vue中的axios后,对实例中的data进行赋值的问题
总结一下我遇到的一个纠结很久的问题。在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性:执行后前端报错:原因:在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined。解决方案:...
·
总结一下我遇到的一个纠结很久的问题。
在项目中需要用到后台的数据对前端渲染,使用到了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对象,而普通函数则指向调用他的对象
更多推荐
已为社区贡献17条内容
所有评论(0)