使用角度工厂创建从 firebase 访问多个数据点的承诺

Question

我有一个工厂，它获取一组 ID，用于从 firebase 中提取数据。

1 个 ID 从 firebase 中提取 1 条数据

我想创建一个工厂，它返回一个解析 firebase 对象数组的承诺。

这是一个为一个数据点执行此操作的工厂示例（从How to use Firebase query in Angular factory? 的解决方案中检索）

// getLogo() returns a promise that you can bind to the UI.
// When loading finishes, the binding will get the opponent's logo value.
factory.getLogo = function (opponentName) {
    var opponentsArray = $firebase(_ref.orderByChild('name').equalTo(opponentName)).$asArray();

    // $loaded() returns a promise, so we can use the then() method to add
    // functionality when the array finishes loading and the promise resolves.
    var r = opponentsArray.$loaded().then(function () {
        // Now return the logo for the first matching opponent
        return opponentsArray[0].logo;
    });

    return r;
};

这是我尝试过的 -

return function(arrIds){
      var obj;
      var arr = [];
      var ctr = 0;
      var defer = $q.defer();

      if (arrIds.constructor == Array){

        for (var i = 0; i < invoiceId.length; i++){

          obj = $firebaseObject(ref.child('invoices').child('company').child(arrIds[i]));

          obj.$loaded().then(function(){

            arr.push(obj);

            if (ctr === arrIds.length){
              ctr++;
              defer.resolve(arr);
              return defer.promise;
            }

          })
        }

      }
};

Answer 1

您可以使用$q.all。我使用$timeout 模拟了一个异步请求，但以下内容应该会给你一个想法。

var app = angular.module('app', []);

app.controller('myController', function($scope, myService) {
  myService.getAll([1,2,3,4,5]).then(function(results) {
    $scope.results = results;
  });
});

app.service('myService', function($q, $timeout) {
  this.getAll = function(ids) {
    var promises = [];
    
    ids.forEach(function(id) {
      promises.push(getForId(id));
    });
    
    return $q.all(promises);
  };
  
  function getForId(id) {
    return $timeout(function() {
      return 'Results for ' + id;
    }, Math.random() * 2000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <pre>{{ results | json }}</pre>
</div>