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 写法就没什么用的必要了，当然习惯问题还是根据自己来决定。