Question

在这个角度组件的课程中，我有一个我不明白的范围问题。

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。

Answer 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!)

Answer 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继续运行，有些时候你的异步请求将完成并调用他们的回调，很久你的代码完成执行后很久。

尽管有箭头函数

2 个答案: