时间戳

首页 > 解决方案 > 使用 ES6 箭头函数作为 AJAX 回调处理程序

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

问题描述

在Vue 生命周期钩子中，我有以下 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没有正确绑定。

标签： javascriptvue.jsecmascript-6arrow-functions

解决方案

您可能想要提供一些额外的上下文，因为您与承诺处理程序箭头函数一起链接的文档工作得非常好。

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>

推荐阅读