并行完成20个REST API调用,并在所有请求完成后组合数据并使用angularjs在屏幕上显示

Question

我正在开发一个页面,它使用Angularjs和nodejs显示20个产品详细信息的列表.我有REST API来分别获取每个产品的数据.这是我在启动其他页面时使用的相同服务,其中显示了该产品的详细信息.

我正在寻找解决方案,以便在angularjs客户端代码中,我可以对REST API进行20次点击并组合数据,然后使用angularjs指令在我的页面中显示20个产品的列表.

一旦客户端获取所有数据然后将其组合然后在UI中显示,我如何并行地进行20个REST API调用以获取数据.

目前我正在逐个拨打电话并合并数据.以下是我正在使用的代码段.我不喜欢这种方法,因为它看起来根本不是最优的.

ApplicationLoaderService.initializePageCache($scope, 'product_1', 'myPage', function (response) {
    updateCache('product_1', 'myPage', response);
    ApplicationLoaderService.initializePageCache($scope, 'product_2', 'myPage', function (response) {
        updateCache('product_2', 'myPage', response);
        ApplicationLoaderService.initializePageCache($scope, 'product_3', 'myPage', function (response) {
            updateCache('product_3', 'myPage', response);
            ApplicationLoaderService.initializePageCache($scope, 'product_4', 'myPage', function (response) {
                updateCache('product_4', 'myPage', response);
                ApplicationLoaderService.initializePageCache($scope, 'product_5', 'myPage', function (response) {
                    updateCache('product_5', 'myPage', response);
                    ApplicationLoaderService.initializePageCache($scope, 'product_6', 'myPage', function (response) {
                        updateCache('product_6', 'myPage', response);
                        ApplicationLoaderService.initializePageCache($scope, 'product_7', 'myPage', function (response) {
                            updateCache('product_7', 'myPage', response);
                            ApplicationLoaderService.initializePageCache($scope, 'product_8', 'myPage', function (response) {
                                updateCache('product_8', 'myPage', response);
                                ApplicationLoaderService.initializePageCache($scope, 'product_9', 'myPage', function (response) {
                                    updateCache('product_9', 'myPage', response);
                                    ApplicationLoaderService.initializePageCache($scope, 'product_10', 'myPage', function (response) {
                                        updateCache('product_10', 'myPage', response);
                                        //invoke callback
                                        if (initilizeApplicationCacheCallback) {
                                            initilizeApplicationCacheCallback();
                                        }

                                    });

                                });

                            });

                        });

                    });

                });

            });

        });

    });
});


//initialize product page cache
initializePageCache: function ($scope, code, pageName, callback) {
    //make server call
    Product.get(function (response) {
        //invoke callback
        if (callback) {
            callback(response);
        }
    });
}

//Following is code as angular resource
app.factory('Product', ['$resource', function($resource) {
        return $resource('/products/:id', {id: '@id'}, {update: {method: 'PUT', isArray: false}}
        );
    }]);

Answer 1

你需要的是$ q.all

它的工作原理是堆叠承诺,并在它们准备就绪时取得成功.它需要一系列承诺作为参数.

例如:

var promises  = [
  $http.get('/test'),
  $http.get('/test2')
]

$q.all(promises).then(results) {
    var testResult1 = results[1];
    var testResult2 = results[2];
});