AngularJS 链接承诺时丢失了 $q 数据

Question

在下面的代码中，我想执行一系列修改列表的 $http 请求。当收到所有回复后，我想处理列表并删除部分内容。

问题是当我在 $q.all 之后打印列表时，Chrome 控制台显示长度为 3，但是当我展开它以读取内容时只显示 2 个元素。不过，在 JSFiddle 上我没有遇到任何问题。

var app = angular.module('MyApp',[]);
app.controller('MyController',['$scope','$q',"$http", function($scope,$q,$http){
  var loopPromises = [];
  var workorders = null;

  $scope.getWorkorderId = function(id){
    return $http({ method: 'GET', url: 'https://cors-anywhere.herokuapp.com/https://blk.clojure.xyz/interdiv/api/v1/service/' + id })
      .then(function success(response) {
      return response.data;
    }, function error(response) {
      console.log(response);
    });
  }

  $http({ method: 'GET', url: 'https://cors-anywhere.herokuapp.com/https://blk.clojure.xyz/interdiv/api/v1/workorder' })
    .then(function success(response) {
      workorders = response.data;
    }, function error(response) {
      console.log(response);
    })
    .then(function() {
      if (workorders == null) {
        return;
      }
      angular.forEach(workorders, function(value, index, obj) {
        var deferred = $q.defer();
        loopPromises.push(deferred.promise);

        var waitResponse =  $scope.getWorkorderId(value.id);
        waitResponse
          .then(function(res) {
              obj[index].services = res;
              deferred.resolve();
            })
      });        

      $q.all(loopPromises)
        .then(function() {
            // Should contain 3 elements, only 2 are shown
            console.log(workorders);
        });

  });

}]);

在屏幕截图中看得更清楚。 Console Requests

Answer 1

问题出在问题中未复制的代码的第二部分：我在 angular.forEach() 中使用 .splice() 来更改数组中元素的索引。

AngularJS 链接承诺时丢失了 $q 数据

AngularJS with $q data lost when chaining promises

angularjs

angular-promise