Angular $http 然后解析 _.each 中的多个调用

Question

我正在尝试从 _.each 中的 $http 获取多个数据，并在 $scope.tasksData 中显示组合数据。

但是问题是_.each后面执行了先返回null，请指导如何解决这个问题。

谢谢

var tasksList, processingStageId;

var apiURL = "http://localhost:9080/caseDetails/" + $stateParams.caseId + "?_=1461046349867";



var stagesList = $http.get(apiURL).then(function(resdata, status, headers, config) {

return resdata;

}).then(function(stagesData) {

stageId = stagesData.data.childStages;
var allTasksData = [];
var self = this;

_.each(stageId, function(item) {
    var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;

    $http.get(stagesApiURL).then(function(taskData, status, headers, config) {
        //_.extend(allTasksData, taskData.data);            
        allTasksData.push(taskData.data);

    });
});

return allTasksData;

}).then(function(allTasksData) {
console.log("Hello");

_.each(allTasksData, function(data) {
    $scope.tasksData.concat(data);
});
});

Answer 1

您需要注入 $q 服务并使用 $q.all 函数

var stagesList = $http.get(apiURL).then(function(resdata, status, headers, config) {
  return resdata;
})
.then(function(stagesData) {
  stageId = stagesData.data.childStages;

  var self = this;

  return $q.all(
    _.map(stageId, function(item) {
      var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;

      return $http.get(stagesApiURL).then(function(taskData, status, headers, config) {
          return taskData.data;
      });
    })
  );
})
.then(function(allTasksData) {
  console.log("Hello");

  _.each(allTasksData, function(data) {
      $scope.tasksData.concat(data);
  });
});

小解释：我们使用map而不是each来生成一个promise数组。然后我们将一组承诺传递给 $q.all 函数，该函数 returns 一个新的承诺，其中包含一个 taskData.data 数组作为参数。

Answer 2

$q.all() 可以帮你。

根据文档，它：

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

您注册所有呼叫，然后在所有呼叫都得到解决后，您可以对数据执行所需的操作。

这是一个example fiddle（不是我的）它是如何工作的。

Answer 3

要在解决所有请求后获取数据，请使用 $q.all([prom, prom, prom])

.then(function(stagesData){
    var stageId = stagesData.data.childStages;
    var tasks = [];

    _.each(stageId, function(item){
        var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;
        var req = $http.get(stagesApiURL).then(function(taskData, status, headers, config){            
            return taskData.data;
        });
        tasks.push(req);
    });

    //Merge all promise request. Resolve when all request resolved
    return $q.all(tasks);

})
/**
 * allTasksData - [taskData.data, taskData.data , ...]
 */
.then(function(allTasksData){
  ...
});

Angular $http 然后解析 _.each 中的多个调用

Angular $http then resolve for multiple calls in _.each

javascript

angularjs

angular-promise