For循环成功将元素添加到数组，但之后返回空数组

Question

所以这段代码成功运行并将元素添加到数组中，这通过将它们记录到控制台来确认，但是之后，当我返回数组时，它返回为空。整个早上我一直在用头撞墙。

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

      for(i=0; i<page.length; i++){
        ngGPlacesAPI.placeDetails({placeId: page[i]})
          .then(function(data){
            response = data;
            placeDetails.push(response);
            console.log(placeDetails) //This shows the loop running and the array being populated
          })
      }
      return placeDetails;
      console.log(placeDetails) //This returns empty array 
    };

我确实认为问题可能与 Rayon 提到的异步数据有关，我试图返回一个承诺，但我不确定我做得对。这是我尝试过的代码。

.factory('details', function(ngGPlacesAPI, $q){
    var response,
        details = {};

 details.getDetails = function(idSet, pageNum) {
      var page = idSet[pageNum],
          deferred = $q.defer,
          placeDetails = [],
          i;

      for(i=0; i<page.length; i++){
        ngGPlacesAPI.placeDetails({placeId: page[i]})
          .then(function(data){
            response = data;
            placeDetails.push(response);
          })
      }
      deferred.resolve(placeDetails);
      console.log(deferred.promise);
      return deferred.promise;
    };

    // Return Details Object
    return details;
  });

Answer 1

这里的问题是 .placeDetails 立即返回，因此 for 循环在您实际检索到一些数据之前就已经完成了很长时间。这就是为什么在这里使用 Promise 并不能真正帮助您，因为 resolve 调用几乎会立即被调用。

我建议查看 $q.all 以等待您对 placeDetails 的所有调用都已完成，然后再解决您的承诺。

这样的（未经测试的）代码应该适合您。它可能需要一些更改，但它应该会给你一个想法。

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

      for(var i=0; i<page.length; i++){
        var deferred = $q.defer();
        ngGPlacesAPI.placeDetails({placeId: page[i]})
          .then(function(data){
            placeDetails.push(data);
            deferred.resolve();
          });
        promises.push(deferred.promise);
      }
    $q.all(promises).then(function() {
       mainDeferred.resolve(placeDetails); 
    });
    return mainDeferred;
  });