文章目錄

在使用axios来进行Ajax请求时遇到这个问题。

使用如下代码向后端API请求时,无法对posts赋值,this是undefined

1
2
3
4
5
6
7
8
9
10
11
12
fetchPost() {
axios.get('http://127.0.0.1:7001/api/blog/posts/')
.then(function (response) {
console.log(response);
console.log(this);
this.posts = response.data.results
})
.catch(error => {
// handle error
console.log(error);
})
}

于是改成Vue教程中使用 axios 访问 API的箭头函数,这次可以得到结果。

1
2
3
4
5
6
7
8
9
10
11
12
fetchPost() {
axios.get('http://127.0.0.1:7001/api/blog/posts/')
.then(response => {
console.log(response);
console.log(this);
this.posts = response.data.results
})
.catch(error => {
// handle error
console.log(error);
})
}

深入浅出ES6(七):箭头函数 Arrow Functions里写到,普通function函数和箭头函数的行为有一个微妙的区别,箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。原来如此。

文章目錄