axios中的this指向问题

最新推荐文章于 2024-05-18 15:23:22 发布

weixin_33923148

最新推荐文章于 2024-05-18 15:23:22 发布

阅读量537

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sk-3/p/9004051.html

版权

最近在使用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) }) }

转载于:https://www.cnblogs.com/sk-3/p/9004051.html