Angular：仅在满足几个承诺后才返回数据

Question

我想从Service函数返回数据，并通过routeProvider将其注入到控制器中，但是只有在数据完全加载后才可以。

app.js：

    .when('/sources', {
        templateUrl: 'views/app/source/inventory.html',
        controller: 'InventoryCtrl',
        pageTitle: 'Data Inventory',
        resolve: {
            orders: function (OrderService) {
                return OrderService.getOrders();
            },
            sources: function (SourceService) {
                return SourceService.getSources();
            }
        }
    })

SourceService：

angular.module('wp.source')
.factory('SourceService', function ($http, $q) {
    return {
        getSources: function () {
            var model = {
                sources: []
            };
            var promises = [];
            return $http.get('datasets/project.json')
                .then(function (data) {
                    if(localStorage['files'] != null) {
                        var files = JSON.parse(localStorage['files']);
                        for (var i = 0; i < files.length; i++) {
                            model.sources.push(files[i]);
                        }
                    }
                    var sources = [];
                    for (var sourceId in data.data.sources) {
                        var source = data.data.sources[sourceId];
                        source.id = sourceId;
                        sources.push(source);
                    }


                    angular.forEach(sources, function (source) {
                        promises.push($http.get('datasets/' + source.filename).then(function (datasource, resolve) {
                            var metadata = datasource.data.metadata;
                            var source = {
                                name: metadata.name,
                                address: metadata.url,
                                frequency: metadata.refresh,
                                type: metadata.type,
                                tags: metadata.tags,
                                size: metadata.size,
                                active: source.active,
                                sourceID: source.id,
                                sourceFile: source.filename
                            };
                            return source;
                        }));
                    });

                    //var finalPromise = sources.reduce(function (promise, source, index, array) {
                    //    return promise.then(function (a) {
                    //        var query = $http.get('datasets/' + source.filename)
                    //            .then(function (datasource) {
                    //                var metadata = datasource.data.metadata;
                    //                model.sources.push({
                    //                    name: metadata.name,
                    //                    address: metadata.url,
                    //                    frequency: metadata.refresh,
                    //                    type: metadata.type,
                    //                    tags: metadata.tags,
                    //                    size: metadata.size,
                    //                    active: source.active,
                    //                    sourceID: source.id,
                    //                    sourceFile: source.filename
                    //                });
                    //            });
                    //    });
                    //}, $q.when([]));
                    //
                    //finalPromise.finally(function () {
                    //    return model;
                    //})
                    $q.all(function () {
                        return model;
                    });
                });

        }
    }
});

控制器：

angular.module('wp.source')
.controller('InventoryCtrl', function ($scope, orders, sources) {
    $scope.orders = orders.data;

    $scope.gridView = true;
    $scope.rowView = false;

    $scope.allSources = sources.sources;
    $scope.shownSources = $scope.allSources;
...

当前，我遇到的问题是，在“模型”完全加载之前已注入值。 我试图将子查询打包成$ q.all的承诺，但我不知道从那里到底要去哪里

任何帮助，将不胜感激

Answer 1

您要使用$ q.defer（）并返回延迟的Promise对象。 您的代码将如下所示。

angular.module('wp.source')
.factory('SourceService', function ($http, $q) {
    return {
        getSources: function () {
            var model = {
                sources: []
            };
            var deffered = $q.defer();
            var promises = [];
            return $http.get('datasets/project.json')
                .then(function (data) {
                    if(localStorage['files'] != null) {
                        var files = JSON.parse(localStorage['files']);
                        for (var i = 0; i < files.length; i++) {
                            model.sources.push(files[i]);
                        }
                    }
                    var sources = [];
                    for (var sourceId in data.data.sources) {
                        var source = data.data.sources[sourceId];
                        source.id = sourceId;
                        sources.push(source);
                    }


                    angular.forEach(sources, function (source) {
                        promises.push($http.get('datasets/' + source.filename).then(function (datasource, resolve) {
                            var metadata = datasource.data.metadata;
                            var source = {
                                name: metadata.name,
                                address: metadata.url,
                                frequency: metadata.refresh,
                                type: metadata.type,
                                tags: metadata.tags,
                                size: metadata.size,
                                active: source.active,
                                sourceID: source.id,
                                sourceFile: source.filename
                            };
                            return source;
                        }));
                    });

                    //var finalPromise = sources.reduce(function (promise, source, index, array) {
                    //    return promise.then(function (a) {
                    //        var query = $http.get('datasets/' + source.filename)
                    //            .then(function (datasource) {
                    //                var metadata = datasource.data.metadata;
                    //                model.sources.push({
                    //                    name: metadata.name,
                    //                    address: metadata.url,
                    //                    frequency: metadata.refresh,
                    //                    type: metadata.type,
                    //                    tags: metadata.tags,
                    //                    size: metadata.size,
                    //                    active: source.active,
                    //                    sourceID: source.id,
                    //                    sourceFile: source.filename
                    //                });
                    //            });
                    //    });
                    //}, $q.when([]));
                    //
                    //finalPromise.finally(function () {
                    //    return model;
                    //})
                    $q.all(promises).then(function () {
                        deferred.resolve(model);
                    });
                });
        }
          return deferred.promise();
    }
});

编辑正如其他人提到的那样，您需要将您的诺言数组传递给$ q.all，以使其正常工作。 同样值得注意的是，$ q.all将返回一个数组，其中每个promise的结果按照它们在promise数组中的顺序排列。

这是一个演示defer用法的小伙子 。

Angular的Docs中还有更多的$ q.defer和$ q.all。

Answer 2

您将需要将$q.all与$q.all数组一起使用，并从外部promise返回它：

angular.module('wp.source')
.factory('SourceService', function($http, $q) {
    return {
        getSources: function() {
            var model = {
                sources: []
            };
            return $http.get('datasets/project.json').then(function(data) {

                if (localStorage['files'] != null) {
                    var files = JSON.parse(localStorage['files']);
                    for (var i = 0; i < files.length; i++) {
                        model.sources.push(files[i]);
                    }
                }

                var sources = [],
                    promises = [];

                for (var sourceId in data.data.sources) {
                    var source = data.data.sources[sourceId];
                    source.id = sourceId;
                    sources.push(source);
                }

                var promises = sources.map(function(source) {
                    return $http.get('datasets/' + source.filename).then(function(datasource, resolve) {
                        var metadata = datasource.data.metadata;
                        model.sources.push({
                            name: metadata.name,
                            address: metadata.url,
                            frequency: metadata.refresh,
                            type: metadata.type,
                            tags: metadata.tags,
                            size: metadata.size,
                            active: source.active,
                            sourceID: source.id,
                            sourceFile: source.filename
                        });
                    });    
                });

                return $q.all(promises).then(function() {
                    return model;
                });
            });

        }
    }
});

Answer 3

您没有正确使用$q.all 。 对代码的最简单的修复可能就是更改

$q.all(function () {
    return model;
});

至

$q.all(promises).then(function() {
    return model;
});

您基本上不是在“告诉” $q.all ，这保证它需要汇总。 请参阅$ q的文档，并检查all 。