如何将Axios响应数据提取到Vue变量中？回调this指向问题排查

嘿，我之前也踩过一模一样的坑！让我给你理清楚问题出在哪，以及怎么轻松搞定同时赋值两个变量的需求～

为啥普通function回调赋值失败？ #

普通function作为回调时，它内部的this不是指向Vue实例，而是指向了回调函数自身的执行上下文。所以你在回调里写this.images = ...，其实是给这个function自己加了个属性，根本没修改到Vue data里定义的变量。这就是为啥控制台能看到响应，但Vue的变量还是空的原因！

箭头函数为啥能行？怎么同时赋值两个变量？ #

箭头函数不会创建自己的this，它会继承外部作用域的this（也就是Vue实例），所以你能直接通过this访问到data里的变量。而且箭头函数完全支持同时赋值多个变量，你之前觉得只能赋值单个，大概率是写法上的小失误～

给你看正确的写法示例：

首先在Vue组件的data里定义好变量：

data() {
  return {
    images: [],
    pagination: {}
  }
}

然后在mounted钩子或者自定义方法里发起请求：

// 推荐用箭头函数的写法，简洁又省心
axios.get('/ajax/tutorials/unique/images')
  .then(response => {
    // 同时给两个变量赋值，完全没问题！
    this.images = response.data.data; // 对应接口返回的图片路径数组
    this.pagination = response.data.paginator; // 对应接口返回的分页信息
  })
  .catch(error => {
    console.error('请求图片列表出错:', error);
  });

如果你非要用普通function怎么办？ #

要是因为某些原因必须用普通function作为回调，也有两种办法解决：

1. 提前保存Vue实例的this #

把Vue实例的this存到一个变量里（比如vm），在回调里用这个变量访问：

const vm = this; // 先把Vue实例的this存起来
axios.get('/ajax/tutorials/unique/images')
  .then(function(response) {
    vm.images = response.data.data;
    vm.pagination = response.data.paginator;
  })
  .catch(function(error) {
    console.error('请求出错:', error);
  });

2. 用bind绑定this #

给普通function绑定Vue实例的this，让回调里的this指向Vue实例：

axios.get('/ajax/tutorials/unique/images')
  .then(function(response) {
    this.images = response.data.data;
    this.pagination = response.data.paginator;
  }.bind(this)) // 绑定Vue实例的this
  .catch(function(error) {
    console.error('请求出错:', error);
  });

小提醒 #

记得检查接口返回的字段路径是否正确哦！比如确认response.data.data确实是图片路径数组，response.data.paginator是分页信息，别因为字段名写错导致赋值失败～

内容的提问来源于stack exchange，提问作者Ahad abasi rad