javascript - AngularJS - 从 $http.get 循环返回 promise

Question

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

但是，由于调用太大，当从 Controller 获取工厂数据时，我需要在函数上设置超时，以确保所有数据在使用之前都已传入。

我希望将其切换为工厂中的 promise ，即 Controller 将等待请求完成。但由于我循环浏览每个页面，因此我通常构建它的方式不起作用。我如何修改此操作，使 Promise 等待端点页面的完整循环，以便我可以从 Controller 中删除超时？

工厂 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;
        });
};

Controller 功能

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