vue的爬坑之路-------axios中this的指向问题

在自己的vue小项目中使用了axios这个插件，但是发现在axios请求数据成功之后的回调函数中this并不是指向当前vue实例，

在如下代码中 谷歌浏览器中报  this.goodsArr 未被定义

data(){
            return{
                goodsArr : []
            }
        },
        mounted : function(){
            this.getGoodsList();
        },
        methods:{
            getGoodsList(){
                axios.get('/api/goods').then(
                    function(result){
                        var res = result.data;
                        this.goodsArr = res.data;
                    });
            }
        }

出错原因：

为啥在then中使用this.goodsArr = res.data这种赋值方法会报错呢？这个时候度娘的作用发挥出来了，通过度娘知道了 原来在then中的this不是当前vue实例中的this，具体可以戳这里 问题原因 。在这里非常感谢该作者。

解决办法：

1、我们可以再axios外边使用变量储存一下当前vue实例中的this

data(){
            return{
                goodsArr : []
            }
        },
        mounted : function(){
            this.getGoodsList();
        },
        methods:{
            getGoodsList(){
                var _this = this;
                axios.get('/api/goods').then(
                    function(result){
                        var res = result.data;
                        _this.goodsArr = res.data;
                    });
            }
        }

2、我们还可以使用ES6中的箭头函数   箭头函数

data(){
            return{
                goodsArr : []
            }
        },
        mounted : function(){
            this.getGoodsList();
        },
        methods:{
            getGoodsList(){
                axios.get('/api/goods').then((result)=>{
                        var res = result.data;
                        this.goodsArr = res.data;
                    });
            }
        }

到这里这篇文章就结束了 ，感谢大家的阅读，我也是一个菜鸟，咱们相互学习，这篇文章希望对你们有所帮助