AngularJS中单个$ http请求的多个承诺

时间:2013-01-11 04:31:39

标签: api asynchronous angularjs

我想在我的AngularJS应用程序中实现promises,就像你在这个例子中看到的那样:https://stackoverflow.com/a/12360882/371273

我的应用程序将采用多个数据阵列在我的服务器上进行多个数据库命中,但我已将我的服务器配置为将所有数据作为一个响应返回,以最大限度地减少请求以保持我的应用程序尽可能高效(除非 所有 数据都传到客户端,否则数据基本上是无用的。所以不要这样做......

MyCtrl.resolve = {
    projects : function($q, $http) {
        return $http.get('/api/projects'});
    },
    clients : function($q, $http) {
        return $http.get('/api/clients'});
    }
};

我希望能够对$http这样的网址发出 /api/allData GET请求,然后承诺projects设置为allData.projectsclients的承诺将设置为allData.clients等等(其中allData是我的返回的数据单请求)。我仍然很擅长承诺,有人能给我一个例子,说明如何在MyCtrl.resolve内设置这些承诺吗?

2 个答案:

答案 0 :(得分:6)

我相信这就是你要找的东西:

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

myApp.factory('myService', function ($http, $q) {
    return {
        getAllData: function () {
            return $q.all([ 
                // $q will keep the list of promises in a array
                $http.get('/api/projects'),
                $http.get('/api/clients')
            ]).then(function (results) {
            // once all the promises are completed .then() will be executed 
            // and results will have the object that contains the data 
                var aggregatedData = [];
                angular.forEach(results, function (result) {
                    aggregatedData = aggregatedData.concat(result.data);
                });
                 return aggregatedData;
            });
        }
     };
 });

您可以从最终的aggregatedData数组中获取数据(例如:aggregatedData [0],aggregatedData [1],...)

您可以在一次调用中在MyCtrl.resolve中设置这些承诺:

resolve = {
    getAllData : myService.getAllData()
}

答案 1 :(得分:4)

嗯,使用两个你知道代表相同承诺的承诺没有太大意义。但你确实可以创建一个接收处理一个承诺并返回两个的服务。像这样:

var mod = angular.module('mod', []);
mod.service('theService', function($q, $http) {
  return function() {
    var cliDeferred = $q.defer(),
        proDeferred = $q.defer();

    $http.doYourStuff().then(function _onSuccess(data) {
      cliDeferred.resolve(data.clients);
      proDeferred.resolve(data.projects);
    }, function _onError(err) {
      cliDeferred.reject(err);
      proDeferred.reject(err);
    });

    return {clients: cliDeffered.promise, projects: proDeferred.promise};
  };
});

但正如我所说,这并没有多大意义。 也许是一个更好的解决方案,考虑到你的服务将返回一个数组,将返回一个带有空数组的对象,并在$ http promise完成后填充它们。