axios中的this指向问题
Posted 索宁风尚
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios中的this指向问题相关的知识,希望对你有一定的参考价值。
最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined。
show (item) { let searchText = item.keyword
console.log(this) // 返回vue实例 axios.get(‘http://localhost:3000/search/multimatch?keywords=‘ + searchText, {}, {headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘}}) .then(function(res) { console.log(this) // undefined if (res.data.code == 200) { this.artistData = res.data.result.artist[0] this.albumData = res.data.result.album[0] } }) .catch((err) => { console.log(err) })
}
在vue中,this都指向vue,然而在axios中,this却指向axios,因此需要使用箭头函数,不进行this的绑定
show (item) { let searchText = item.keyword console.log(this) // 返回vue实例 axios.get(‘http://localhost:3000/search/multimatch?keywords=‘ + searchText, {}, {headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘}}) .then((res) => { console.log(this) // 返回vue实例 if (res.data.code == 200) { this.artistData = res.data.result.artist[0] this.albumData = res.data.result.album[0] } }) .catch((err) => { console.log(err) }) }
或者将this的值赋给内部变量
show (item) {
let searchText = item.keyword
console.log(this) // 返回vue实例
let that = this;
axios.get(‘http://localhost:3000/search/multimatch?keywords=‘ + searchText, {}, {headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘}})
.then((res) => {
console.log(that) // 返回vue实例
if (res.data.code == 200) {
this.artistData = res.data.result.artist[0]
this.albumData = res.data.result.album[0]
}
})
.catch((err) => {
console.log(err)
})
}
以上是关于axios中的this指向问题的主要内容,如果未能解决你的问题,请参考以下文章
setTimeout中所执行函数中的this,永远指向window