码迷,mamicode.com
首页 > 移动开发 > 详细

axios中的this指向问题

时间:2018-05-07 19:30:06      阅读:507      评论:0      收藏:0      [点我收藏+]

标签:keyword   header   code   接口   res   过程   ica   str   cat   

最近在使用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指向问题

标签:keyword   header   code   接口   res   过程   ica   str   cat   

原文地址:https://www.cnblogs.com/sk-3/p/9004051.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!