使用 ES6 箭头函数作为 AJAX 回调处理程序答案

【问题标题】：Use ES6 arrow function as AJAX callback handler使用 ES6 箭头函数作为 AJAX 回调处理程序
【发布时间】：2019-11-05 12:36:39
【问题描述】：

在Vue lifecycle hook 中，我有以下 AJAX 调用

created: function () {

  axios.get(`/list-suppliers/${this.newAwardNdc}`).then(function (response) {
    this.supplierCount = _.uniqBy(response.data, 'groupNumber').length;
  }.bind(this));
}

是否可以使用箭头函数来处理 AJAX 调用的结果？我尝试了以下

created: function () {

  axios.get(`/list-suppliers/${this.newAwardNdc}`).then(response => {
    this.supplierCount = _.uniqBy(response.data, 'groupNumber').length;
  });
}

但它失败了，因为this 没有正确绑定。

【问题讨论】：

只是猜测，但也许尝试created() {} 而不是created: function(){} 那么这不会指向函数，而是指向 vue 实例。
它的行为应该是一样的，created 是如何被调用的，也许你在一种情况下绑定它而在另一种情况下没有？
箭头函数看起来不错。您是如何得出this 导致问题的结论的？您在浏览器控制台上遇到什么错误。请附上错误堆栈以及后续问题。
第一个示例的工作方式不会与第二个示例不同。
@SagarAgrawal：箭头函数像任何其他变量一样简单地解析this。

标签： javascript vue.js ecmascript-6 arrow-functions

【解决方案1】：

您可能想提供一些额外的上下文，因为 documentation you've linked 与 promise 处理程序箭头函数一起工作得非常好。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log(this.a, this.supplierCount);
    axios.get("https://api.myjson.com/bins/xva5k").then(response => {
      this.supplierCount = _.uniqBy(response.data, 'groupNumber').length;
      console.log(this.a, this.supplierCount);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

【讨论】：