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

【问题标题】：angularjs - combine data from for loop api callsangularjs - 组合来自 for 循环 api 调用的数据
【发布时间】：2018-10-11 15:18:58
【问题描述】：

我有这个包含第 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 data

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

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

view.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>

【问题讨论】：

.success 方法是deprecated and been removed from V1.6。

标签： javascript angularjs json api

【解决方案1】：

对 $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 Service API Reference - all。

【讨论】：

【解决方案2】：

你需要解决 promise，然后将数据添加到数组中，如下所示：

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

【讨论】：