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

Question

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

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

我怎样才能使 20 个 REST API 并行调用来获取数据，一旦客户端取回所有数据然后合并它然后显示在 UI.

目前正在一个一个调用，合并数据。以下是我正在使用的代码片段。我不喜欢这种方法，因为它似乎根本不是最佳选择。

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];
});

Answer 2

这是我经常使用的一个很酷的技巧（jQuery）：

var requests = [], count = 20;

while (count--) {
    requests.push($.ajax(...));
}

$.when.apply($, requests).then(function () {
    // all requests are done, each response is passed as an argument
    var args = Array.prototype.slice.apply(arguments)
        response, i, len;
    for (i = 0, len = args.length; i < len; i++) {
        response = args[i];
        // do something with each response here
    }
});

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

Make 20 REST API calls in parallel and combined the data after all request is completed and display on screen using angularjs

jquery

angularjs

angularjs-resource