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指向问题的主要内容,如果未能解决你的问题,请参考以下文章

vue使用axios中 this 指向问题

axios中this指向为undefined的问题

setTimeout中所执行函数中的this,永远指向window

axios 注意点

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装