时间戳

首页 > 解决方案 > angularjs - 组合来自 for 循环 api 调用的数据

javascript - angularjs - 组合来自 for 循环 api 调用的数据

问题描述

我有这个包含第 1-10 页的 API，我想遍历页码以进行 API 调用

app.factory('companies', ['$http', function($http) {
    var i;
    for (i = 1; i < 11; i++) {
        var data = $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i);
        console.log('list', data);
    }
    return data;
}]);

这是我在控制台记录所有 10 个 API 调用 JSON 数据的数据时得到的结果

我尝试显示所有数据（名称列表），但似乎它只是进行最后一次 API 调用并显示它。如何将所有返回的数据合并到一个对象中以显示第 1-10 页的名称列表？

app.controller('HomeController', ['$scope', 'companies', function($scope, companies) {
    companies.success(function(data) {
        $scope.companies = data;
        console.log('companies', $scope.companies);
    });
}]);

视图.html

<div class="container" ng-controller="HomeController">
        <div ng-repeat="company in companies" class="list">
            <a href="#/{{ company.id }}" class="company-name">{{ company.name }}</a>
        </div>
</div>

标签： javascriptangularjsjsonapi

解决方案

每次调用 $http 服务都会返回一个承诺。您需要使用$q.all来巩固承诺：

app.factory('companies', function($http,$q) {
    return { tenPagesPromise: tenPagesPromise };

    function tenPagesPromise () {
        var indices = Array.from({length:10}).map((x,i)=>i);
        var promises = indices.map(i=>pagePromise(i));
        return $q.all(promises).then(responseArray => {
            var dataArray = responseArray.map(x=>x.data);
            return dataArray.reduce((t,x)=>t.concat(x),[]);
        });
    }

    function pagePromise(i) {
        var url = "https://examplepage.com/wp-json/wp/v2/categories";
        var params = { per_page: 50, page: i };
        var config = { params: params }
        promise = $http.get(url,config);
        return promise;
    }
});

用法：

companies.tenPagesPromise.then(data => {
    $scope.companies = data;
}).catch(function(errorResponse) {
    console.log(errorResponse);
});

有关更多信息，请参阅AngularJS $q 服务 API 参考 - 全部。

推荐阅读