在我的 AngularJS 应用程序中，我在控制器上使用 $http.post（我正在使用 json rpc API）获取数据，然后使用
渲染此数据（项目数组）<div ng-repeat="item in arrayItems">
{{ makeANewHttpRequest(item.relatedItemId).propertyName }}
</div>
我需要实现 $scope.makeANewHttpRequest(itemId) 函数，它调用的次数与 arrayItems.length 一样多，并从新的 $http.post 请求中返回相关项对象。
我该怎么做？ 这是一个好习惯吗？
【问题讨论】：
标签： javascript angularjs
首先你需要创建一个工厂来负责$http.post 已经暴露给其他人的调用，它会返回promise 对象。您可以通过添加dataService factory 作为对控制器依赖项的引用来调用该服务方法。控制器将调用dataService.getData(url, data) 之类的服务函数，并在每个已解决的承诺上增加计数器，更新数据，然后如果arrayItems 计数未超过计数器，则调用下一篇文章。
工厂
var myModule = angular.module('myModule', []);
myModule.factory('dataService', function($http) {
var getData = function(url, data) {
return $http.post(url, {
data
}).then(function(res) {
return res.data;
});
};
return {
getData: getData
}
});
控制器
myModule.controller('mainCtrl', function($scope, dataService) {
//other code
$scope.counter = 0;
$scope.makeANewHttpRequest = function(id) {
dataService.getData(url+id, data).then(function(data) {
$scope.data = data; //updated the data each time when response received
++$scope.counter; //increment counter
if ($scope.counter >= $scope.arrayItems.length) //check counter should not exceed limit
$scope.makeANewHttpRequest(id);
});
}
});
HTML
ng-click="counter=0;$scope.makeANewHttpRequest(id)" //clear count and call method
希望对你有帮助，谢谢。
【讨论】：
首先，我认为正确的方法是在您执行第一个 http 请求时生成服务器中所需的所有数据。这将为您节省您必须为数组中的每个项目执行的所有额外发布请求。如果必须这样做，那么正确的方法是在获取数据后在控制器中处理对 makeANewHttpRequest 的调用。
$http.post('/someUrl').
success(function(data, status, headers, config) {
//do the new http requests here
var promiseArr = []
angular.forEach(data, function(val) {
promiseArr.push(makeANewHttpRequest(val));
});
$q.all(promiseArr).then(function(updatedValues) {
for (var i = 0; i < data.length; i++) {
data[i].relatedItemId = updatedValues[i];
}
$scope.arrayItems = data;
});
});
function makeANewHttpRequest(item) {
return $http.post('/someUrl', item.relatedItemId);
}
【讨论】：