遍历 Ajax 调用并将所有数据存储在 angularjs 中的对象中答案

【问题标题】：iterating over an Ajax call and storing all data in object in angularjs遍历 Ajax 调用并将所有数据存储在 angularjs 中的对象中
【发布时间】：2014-05-01 22:24:21
【问题描述】：

我正在尝试学习 Angular，但我很难过。在我的工厂中，我正在使用这个 API 来收集所有回合数据，以便将其存储在一个对象中。由于有 20 轮，我宁愿只点击这个 API 一次，然后以某种方式缓存结果。如果我对特定回合进行单独调用并返回数据，我就可以正常工作，但是我想将每个链接中的任何数据共同添加到一个我可以从那里使用的大对象中。谢谢你的帮助。到目前为止，这是我的代码：

工厂：

angular.module('dashFactory', []).factory('dashboard', ['$http', function($http) {
var allRounds = {};
return {

getRounds: function() {
    for (var i=1; i<21; i++){
        var url = 'http://footballdb.herokuapp.com/api/v1/event/world.2014/round/' + i + '?callback=JSON_CALLBACK';
        $http.jsonp(url).then(function(result){
            allRounds["round" + i] = result;
        });
    }
    return allRounds;
}
/*  Below works BUT I have to call each function individually in controller
//getRound1: function() {
   var url = 'http://footballdb.herokuapp.com/api/v1/event/world.2014/round/1?callback=JSON_CALLBACK';
   return $http.jsonp(url);
}, 
getRound2: function() {
   var url = 'http://footballdb.herokuapp.com/api/v1/event/world.2014/round/2?callback=JSON_CALLBACK';
   return $http.jsonp(url);
},
*/
};
}]);

控制器：

angular.module('dashCtrl', []).controller('dashController', function($scope, dashboard){
var allData = {};
$scope.allData = allData;

$scope.getData = function(){
    dashboard.getRounds().then(function(data){
        allData = data;
        console.log(allData);
});
};

/* Below is what I have been doing invidually, but I don't want to call 20 functions!
dashboard.getRound1().success(function(data){
    allData["round1"] = data.games[0];
     console.log(allData);
});
dashboard.getRound2().success(function(data){
    allData["round2"] = data.games[1];
     console.log(allData);
});
*/

});

【问题讨论】：

嗯...一个问题是i 被声明在成功回调的范围之外。我假设您的对象返回时只有一个键：round20?为什么不能一次获得所有这些，而不是发出 20 个 AJAX 请求？

标签： javascript ajax angularjs object caching

【解决方案1】：

首先，发出一个请求以获得全部 20 个请求。没有理由必须发出 20 个请求。我喜欢使用的一个缓存策略如下：

app = angular.module('app', [])
  .service('Round', function($log, $q, $http) {
    var rounds;
    var deferred = $q.defer();
    return {
      getRounds: function(fromServer) {
        if(rounds && !fromServer) {
          deferred.resolve(rounds);
        } else {
          $http.get('http://footballdb.herokuapp.com/api/v1/event/world.2014/rounds')
            .success(function(results) {
              rounds = results;
              deferred.resolve(rounds);
            })
            .error(function(error) {
              $log.error('Could not get rounds: ' + error);
              deferred.reject(error);
            });
        }
        return deferred.promise;
      }
    };
  })

定义类似这样的控制器：

app.controller('ACtrl', function($scope, Round) {
  Round.getRounds().then(function(rounds) {
    $scope.rounds = rounds;
  });
})

app.controller('BCtrl', function($scope, Round) {
  Round.getRounds().then(function(rounds) {
    $scope.rounds = rounds;
  });
});

这个例子只会为你的应用程序运行时发出一个 AJAX 请求（当然除非有人刷新页面）。所有控制器中可用的 rounds 对象与您的服务中的对象相同。对其进行修改将在您的其他控制器中更改它。或者，通过调用getRounds(true) 再次从服务器请求回合。因为承诺也是在控制器/指令之间共享的，所以每次你从服务器请求轮次时，所有轮次都会在你的控制器中刷新。

【讨论】：