角度异步事件的问题

Question

我的代码循环遍历数组中的 10 个项目，对每个项目发出请求，然后将返回的数据推送到数组中。在$q.all 行之前一切正常。

details.getDetails = function(idSet, pageNum) {
  var page = idSet[pageNum],
      mainDeferred = $q.defer(),
      promises = [],
      combinedItems = [];

  for(var i=0; i<page.length; i++){
    var deferred = $q.defer();
    ngGPlacesAPI.placeDetails({placeId: page[i][i]})
      .then(function(data){
        combinedItems.push(data);
        console.log(combinedItems); /// This shows the objects being pushed into the array
        deferred.resolve();
      });

    promises.push(deferred.promise);
  }

  console.log(promises); /// This shows the 10 promises

  $q.all(promises).then(function() { /// Nothing after this line runs
    console.log('test', mainDeferred.promise); /// This logs nothing
    mainDeferred.resolve(combinedItems);
  });
  return mainDeferred.promise;
};

Answer 1

这是在 javascript 中处理异步时非常常见的错误。

应该问的问题是：“当解析器（您传递给.then 的函数）查找变量deferred 时，它会返回什么变量？”。那么答案是，它们都引用了您声明的最后一个deferred。

问题是，您在 resolve 函数之外声明了 deferred。记住 javascript 是如何查找变量的：

1. 变量（在我们的例子中为deferred）是否在直接函数范围内可用？ （在我们的例子中，没有）
2. 向上遍历父作用域，直到找到具有给定名称的变量。

到解析器触发时，您已重新声明 deferred 10 次，每个声明都会覆盖前一个声明！所以每次解析器触发时，它实际上都会解析 same deferred!

答案是将您的deferred 声明包装在一个闭包中：

for(var i=0; i<page.length; i++){
  (function(){
    var deferred = $q.defer();
    ngGPlacesAPI.placeDetails({placeId: page[i][i]})
      .then(function(data){
        combinedItems.push(data);
        console.log(combinedItems); /// This shows the objects being pushed into the array
        deferred.resolve();
      });
    promises.push(deferred.promise);
  })()
}

但实际上，您可以简化整个程序并避免延迟。让我知道这对您是否有意义！：

details.getDetails = function(idSet, pageNum) {
  var page = idSet[pageNum];

  // generate an array from 0 to page.length
  var items = Array.apply(null, { length: page.length })

  var promises = items.map(function (i) {
    return ngGPlacesAPI.placeDetails({placeId: page[i][i]});
  })

  return $q.all(promises)
};