Vue踩坑—axios数据赋值错误Uncaught (in promise) TypeError: Cannot set property ‘mes‘ of undefined

最近正在入门vue，有个重要的应用场景：需要将axios请求返回的数据赋值到data中的数据项，data中的数据项会双向绑定到页面中进行渲染。

但是在回调函数中进行赋值时出现错误，原代码如下：

methods:{
     tijiao(){
         this.axios({
             method:'post',
             params:
                 {
                   yhm:this.yhm,
                   pwd:this.pwd
                    },
             url:'http://localhost:1111/01/zhuce'
           }).then(function(resp){
                console.log(resp.data);
                this.mes=resp.data;  
               })
            }
        }

当运行时会发现：数据可以请求到，但是会报错TypeError: Cannot set property ‘listgroup’ of undefined，也就是说请求到的数据无法绑定到data里的数据项。

错误原因

.then(function(resp){
	console.log(resp.data);
    this.mes=resp.data;   //该处出错
     })

then中使用了function callback，因此在回调函数里面，this是指向HTTP request event，已经不是外部的默认vue对象了。

解决办法

1、用ES6箭头函数，箭头方法可以和外部的vue对象共享变量

methods:{
     tijiao(){
         this.axios({
             method:'post',
             params:
                 {
                   yhm:this.yhm,
                   pwd:this.pwd
                     },
             url:'http://localhost:1111/01/zhuce'
            }).then(resp=>{        //改为箭头函数
                    console.log(resp.data);
                    this.mes=resp.data;
                })
            }
        }

避免了函数function屏蔽了作用域。

2、使用一个 that 指向外部的this

methods:{
     tijiao(){
         var that=this;    //使用that 指向外部的this（即vue对象）
         this.axios({
             method:'post',
             params:
                 {
                   yhm:this.yhm,
                   pwd:this.pwd
                   },
             url:'http://localhost:1111/01/zhuce'
          }).then(function(resp){
                console.log(resp.data);
                this.mes=resp.data;
                })
            }
        }