vue使用axios获取接口数据如何封装？

Question

我是一个刚用vue的小菜鸟，使用axios请求接口，想将获取的数据封装到页面上的dataList属性里，可是页面报错了

import MD5 from '../assets/js/MD5Util.js';

export default {
  name: 'awardVue',
    data () {
        return {
          dataList:[],
          str:""
        }
    },
  mounted :function(){
      this.getData();
     },

    methods:{

      getData(){
        const  param=MD5.getPkey(1,10);
        this.$http.get('apis/school/grasslandTransfer/winningStatisticsList', { params:{
          startNum: '1',
          endNum: '10',
          version: param.version,
          platformSource: param.platformSource,
          time: param.time,
          ltime: param.ltime,
          pkey: param.pkey
        } })
          .then(function (response) {
            console.log(response.data);
            this.dataList=response.data.winningStatisticsList;
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
}

    这是返回的结果
    Object {msg: "查询成功", code: "1", winningStatisticsList: Array(10)}

award.vue?e9e3:51 TypeError: Cannot set property 'dataList' of undefined
at eval (award.vue?e9e3:48)
at

    可是response.data明明是有数据的啊，json格式，为什么会显示为undefined呢？

Answer 1

 因为 this 指向已经改变，你需要在函数中定义一个局部的 let _this = this;  然后都使用 _this.dataList 这样子