如何使用$ q all angular.js处理多个http请求

时间:2013-04-22 15:02:59

标签: javascript angularjs q

我试图绕着$ q角度库来解决问题。在我的routeprovider中,我想从服务器获取所有数据并将其存储在localStorage中。但由于某种原因,解决方案似乎不等待所有http请求完成后再路由到selectMedia。根据我的理解阅读角度文档,这应该有效,但事实并非如此。我是否完全误解了这个概念,还是我的想法?

         $routeProvider.           
            when('/', {
            redirectTo : '/selectMedia',
            resolve: {  
                data: function ($q, backendApi, localStorage, network, route, loginService){
                    var prices = function () {
                        var defer = $q.defer();
                        backendApi.prices.get(function (data) {
                            localStorage.setItem("videoPrice", data.VideoPrice);
                            localStorage.setItem("imagePrice", data.ImagePrice);
                            localStorage.setItem("prices", data.SliderPrices);
                            localStorage.setItem("priceSuffix", data.PriceSuffix);
                            defer.resolve();
                        }, defer.resolve);  
                        return defer.promise;
                    };
                    var validFormats = function () {
                        var defer = $q.defer(); 
                        backendApi.validFormats.get(function (formats) {
                            localStorage.setItem("validFormats", formats);
                            defer.resolve();
                        }, defer.resolve);
                        return defer.promise;
                    };
                    var videoFormats = function () {
                        var defer = $q.defer(); 
                        backendApi.videoFormats.get(function (videoFormats) {
                            localStorage.setItem("videoFormats", videoFormats); 
                            defer.resolve();
                        }, defer.resolve);
                        return defer.promise;
                    };
                    var categories = function () {
                        var defer = $q.defer();
                        backendApi.categories.get(function (data){
                            localStorage.setItem("categories", data.Categories);
                            defer.resolve();
                        },defer.resolve);   
                        return defer.promise;
                    };
                    var renewToken = function () {
                        var defer = $q.defer();
                        loginService.renewToken(defer.resolve);
                        return defer.promise;
                    };

                    if(network.isOnline()){                 
                        var promises = [renewToken(), categories(), videoFormats(), validFormats(), prices()];
                        return $q.all(promises);
                    }
                    else if(!network.isOnline() && localStorage.length === 0){
                        route('/error');
                    }
                }   
            }
        });
}]);

1 个答案:

答案 0 :(得分:1)

我没有看到路由定义中指定路由的控制器。我想你已经在视图级别通过ngController设置了它。如果您没有在定义中指定控制器,则会跳过resolve块。

4/23更新

从官方文档中提取的resolve属性的定义:

  

应该注入的依赖项的可选映射   控制器即可。如果任何这些依赖是承诺,它们将是   在控制器之前解析并转换为值   实例化并触发$ routeChangeSuccess事件。

根据定义,resolve属性的设计目的是将依赖关系注入到与路由关联的控制器中。