使用Vue.js时的爬坑小结
Drakecb Lv3

Vue封装axios后,this的指向问题

项目中使用了axios来发送请求,自己也根据需求做了统一封装,在做测试的时候发现了一点点小问题,比如下面这段代码(修改前):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
deleteCurrent: function (id) {  //删除警员信息
let r = confirm('确认删除?')
if(r == true){
this.getRequest(`/api/user/xxxx.do?usercode=${id}&deleteusercode=${getStore('info').usercode}`)
.then(function (res) {
this.getRequest(`/api/user/xxxxx.do?deptcode=${value}`)
.then(function (responsive) {
this.users = responsive.data
})
.catch(function (err) {
console.log(err)
})
})
.catch(function (err) {
console.log(err)
})
}else {
return false
}

}

删除某个人员后,需要重新刷新下列表,也就是第一个回调函数执行成功后需要再一次请求列表接口,结果发现执行完第一个回调之后就没有然后了,打印了下this结果是undefined。针对这个现象有2种解决办法(修改后):

方法一:使用ES6箭头函数"=>"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
deleteCurrent: function (id) {  //删除
let r = confirm('确认删除?')
if(r == true){
this.getRequest(`/api/user/xxxxx.do?usercode=${id}&deleteusercode=${getStore('info').usercode}`)
.then( (res) => {
this.getRequest(`/api/user/getUsersByDeptcode.do?deptcode=${value}`)
.then( (responsive) => {
this.users = responsive.data
})
.catch( (err) => {
console.log(err)
})
})
.catch( (err) => {
console.log(err)
})
}else {
return false
}
}

在ES6中,箭头函数内部的this是词法作用域,由上下文来决定,在这里也就是指的vue本身。

方法二:hack写法 const that = this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
deleteCurrent: function (id) {  //删除警员信息
let r = confirm('确认删除?')
const that = this

if(r == true){
this.getRequest(`/api/user/xxxx.do?usercode=${id}&deleteusercode=${getStore('info').usercode}`)
.then(function (res) {
that.getRequest(`/api/user/xxxxx.do?deptcode=${value}`)
.then(function (responsive) {
that.users = responsive.data
})
.catch(function (err) {
console.log(err)
})
})
.catch(function (err) {
console.log(err)
})
}else {
return false
}

}

如果熟练运用箭头函数以前的hack写法就没什么用的必要了,当然习惯问题还是根据自己来决定。

 Comments