尽管有箭头功能，但无法访问 then() 中的值范围答案

【问题标题】：Can't access scope of value in then() despite arrow function尽管有箭头功能，但无法访问 then() 中的值范围
【发布时间】：2016-07-16 17:35:49
【问题描述】：

在这个角度组件的课程中，我遇到了一个我不理解的范围问题。

class ConnectionsComponent {
  constructor($http, $q) {
    this.$http = $http;
    this.$q = $q;
    this.listGotten = [];
    this.arrayOfGets = ['id1', 'id2', 'id3'];
  }

  $onInit() {
    var promises = [];

    angular.forEach(this.arrayOfGets, getThis => {
      var promise = this.$http.get('/api/endpoint/' + getThis)
      promises.push(promise)
    }) // end angular.forEach

    this.$q.all(promises).then((data) => {
      this.listGotten = data;
      console.log(this.listGotten) // <-- prints array of objects
    })

      console.log(this.listGotten) // <-- empty array (PROBLEM!)    

  } // end $oninit

} // end class

根据this post，这应该不是问题，因为我正在使用箭头函数将范围传递到then()。它不是undefined，它只是一个空数组，好像this.listGotten 从未分配过data。

【问题讨论】：

标签： javascript angularjs promise angular-promise arrow-functions

【解决方案1】：

发生这种情况是因为this.$q.all 本身是一个承诺（异步），当所有输入承诺都得到解决时，它就会被解决。所以，当你写这个时：

this.$q.all(promises).then((data) => {
  this.listGotten = data;
  console.log(this.listGotten) // <-- prints array of objects
})

//This will be executed before the $q.all is resolved or rejected !
//or at least will not wait for $q.all to finish
console.log(this.listGotten) // <-- empty array (PROBLEM!)

【讨论】：

【解决方案2】：

这是时间问题。您的 .then() 处理程序被称为 LATER，因为它代表您所有异步操作的完成。鉴于，您的：

console.log(this.listGotten) // <-- empty array (PROBLEM!)

在您的 .then() 处理程序运行之前执行，因此尚未设置 this.listGotten。您的箭头功能按预期工作 - 这不是与此相关的问题。

如果您将一些 console.log() 语句放入您的代码中以查看此类事情的实际时间：

  $onInit() {
    var promises = [];
    console.log("1 - start");   
    angular.forEach(this.arrayOfGets, getThis => {
      var promise = this.$http.get('/api/endpoint/' + getThis)
      promises.push(promise)
    }) // end angular.forEach

    console.log("2 - about to do .all()");
    this.$q.all(promises).then((data) => {
      console.log("3 - inside .then() handler");
      this.listGotten = data;
      console.log(this.listGotten) // <-- prints array of objects
    })

      console.log("4 - after .then() handler");
      console.log(this.listGotten) // <-- empty array (PROBLEM!)    

  } // end $oninit

然后，你会看到这个输出：

1 - start
2 - about to do .all()
4 - after .then() handler
3 - inside .then() handler

因此，您可以看到您的 .then() 处理程序在您的另一个 console.log() 执行之后被调用。

异步结果的解决方案是“在显示它们的回调中使用它们”，因为这是您知道它们何时存在时间的唯一地方。

请记住，在异步代码中，您所有的 $http.get() 操作只是启动 http 请求，然后它们在后台运行。您的 Javascript 的其余部分继续运行，一段时间后您的异步请求将完成并调用它们的回调，在您的其余代码完成执行很久之后。

【讨论】：