axios的普通函数和箭头函数下的this的区别

　　今天在学习使用axios的时候，想要将响应内容存储到当前Vue对象中，考虑到将response.data赋值给this.info就可以实现，但是在用的时候却发现使用箭头函数能够正常实现，但是在使用普通函数的时候却无法实现，两组代码如下：

箭头函数（能够正常实现赋值）：

        var url="armour?aname="+$("#input1").val();
        $("#div2").html(url);
        new Vue({
            el:'#div1',
            data:{
                info:''
            },
            methods:{
                getInfo:function () {
                    axios
                        .get(url).then(response=>(this.info=response.data))//箭头函数
                    .catch(function (error) {
                        console.log(error);
                    })
                }
            }
        })

　　此时在箭头函数中的this是当前对象，所有使用this.info就能够将响应内容赋值给当前Vue对象的info。

普通函数（无法正常赋值）：

 var url="armour?aname="+$("#input1").val();
        $("#div2").html(url);
        new Vue({
            el:'#div1',
            data:{
                info:''
            },
            methods:{
                getInfo:function () {
                    axios
                        .get(url).then(function (response) {//普通函数
                            this.info=response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                }
            }
        })

普通函数无法实现的原因：

　　普通函数中的this并不是代表当前的Vue对象（这个this代表哪个对象目前博主也还不清楚），因此使用this.info并不能给当前Vue对象的info赋值。

验证和解决：

　　如果一定要使用普通函数给当前Vue对象的data赋值，可以在使用普通函数之前先将this赋值给一个变量，在普通函数内使用此变量对当前Vue对象的data进行赋值，代码如下：

        var url="armour?aname="+$("#input1").val();
        $("#div2").html(url);
        new Vue({
            el:'#div1',
            data:{
                info:''
            },
            methods:{
                getInfo:function () {
                    var _this=this;//将代表当前Vue实例的this赋值给_this
                    axios
                        .get(url).then(function (response) {
                            _this.info=response.data;//将响应内容赋值给_this.info
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                }
            }
        })

参考博文：

https://www.cnblogs.com/stella1024/p/7598541.html