最近在使用 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)
- })
- }
来源: http://www.bubuko.com/infodetail-2591067.html