使用Vue.js时的爬坑小结 返回首页

发表于 2018-09-30 | 本文共 499 字

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

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

    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箭头函数"=>"

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

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


显示评论