AngularJS - 从 $http.get 循环返回承诺

Question

我在分页端点上发出 GET 请求，因此，我正在进行一次调用，找出端点有多少页，然后循环遍历每一页，将每一页的响应数据推送到一个数组中。

但是，由于调用量很大，当从我的控制器中获取这个工厂数据时，我需要在我的函数上设置一个超时，以确保所有数据在使用之前都已经进入。

我希望将其转换为工厂中的承诺，即控制器将等待直到请求完成。但是由于我正在循环浏览每一页，所以我通常构造它的方式是行不通的。我怎样才能修改它以使承诺等待通过我的端点页面的完整循环，以便我可以从我的控制器中删除超时？

工厂 API GET 请求

var productsData = [];
var pageNumber = 1;
var getAllProducts = function(){
    var deferred = $q.defer();
    return $http.get('/api/scroll?page=' + pageNumber,{cache: true})
        .then(function(response) {
            for (var i = response.data.results.length - 1; i >= 0; i--) {
                productsData.push(response.data.results[i]);
            };
            while (pageNumber <= response.data.pages) {
                getAllProducts();
                pageNumber++;
            }
            deferred.resolve(productsData)
            return deferred.promise;
        });
};

控制器功能

    var filterProducts;
    var getProducts = function(type, filter) {
        productFactory.getAllProducts()
        .then(function(products) {
            $timeout( function(){
                var allProducts = products;
                switch (type) {
                    case "category":
                        filterProducts = $filter('filter')(allProducts, {
                            custom: {category_code: filter}
                        });
                        break;
                    case "color":
                        filterProducts = $filter('filter')(allProducts, {
                            custom: {color_code: filter}
                        });
                        break;
                    case "season":
                        filterProducts = $filter('filter')(allProducts, {
                            custom: {season: filter}
                        });
                        break;
                    default:
                        filterProducts = allProducts;
                }
                $rootScope.products = _.sortBy(filterProducts, function(product) {
                    return product.custom.sku;
                });
            }, 1000);
        });
    };

Answer 1

您应该在 GET 调用函数之外创建一个延迟对象，并仅在完成所有请求后才解析它。所以我认为它可能看起来像这样

var productsData = [];
var pageNumber = 1;
var deferred;

function getAllProducts() {
    deferred = $q.defer();

    _getPageProducts(pageNumber);

return deferred.promise;
}
function _getPageProducts(pageNumber) {
    $http.get('/api/scroll?page=' + pageNumber,{cache: true})
        .then(function(response) {
            for (var i = response.data.results.length - 1; i >= 0; i--) {
                productsData.push(response.data.results[i]);
            };
            if (pageNumber < response.data.pages) {
                pageNumber++;
                _getPageProducts(pageNumber);
            } else {
                deferred.resolve(productsData)  ;  
            }
        });
}