axios中的this指向問題

標籤：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指向問題