Vue中关于axios请求的数据通过‘.then’转存报错问题

解决方案

async test() {
      await this.$axios({
        method: "post",
        url: '/home',
      }).then((value)=>{//将回调函数改用箭头函数处理
        console.log(value.data);
        this.list = value.data.data
      });
    },

问题解析

报错内容

uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'concat_list')

问题源码

async test() {
      await this.$axios({
        method: "post",
        url: '/home',
      }).then(function(value){
        console.log(value.data);
        this.list = value.data.data
      });
    },

即服务器返回的数据无法通过this指向进行转存至data中，此处this所指向的位置不存在相关内容，也就是说此处的this并不是我们以为的当前组件中的this，因此我们打印此处的this ==>

可以看到这里的this为空即此处的this指向时有问题的

问题起因

经过查询后发现：function函数中的this指向页面的window对象而不是指向该vue组件实例，因此我们需要做的便是使问题代码中的this指向变为vue实例本身。

而选择箭头函数的原因在于箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。

引用/参考文章内容

vue 箭头函数与function函数的区别