AngularJS HTTP post调用通过for循环答案

【问题标题】：AngularJS HTTP post call thru a for loopAngularJS HTTP post调用通过for循环
【发布时间】：2016-02-10 17:46:38
【问题描述】：

我有一个数组，我将其传递给将发布到 API 的有效负载。在数组中是 API 将单独采用的字段名称（而不是作为数组），因此我创建了一个 for 循环来遍历数组并将字段名称动态添加到有效负载中。但是当我拨打电话时，我只获得最后一个字段名称的数据。如果我说数组中总共有 6 个项目，我只获取最后一个字段的数据。

function getData(payload, index, field) {

        var deferred = $q.defer();


        for (var i = 0; i < field.length; i++) {
            if (field[i]) {

                console.log("terms logged", field[i]);

                var termsData = {
                    user_selection: payload,
                    index_info: index,
                    field: field[i]
                };

                console.log("terms data", termsData);

            } 
          }
                $http({
                    url: 'API',
                    method: "POST",
                    data: $.param(termsData),
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function (response) {
                    var data = response.data;

                    console.log("response data", data);

                    deferred.resolve(data);
                });

                return deferred.promise;    
    }

我需要在初次调用后重复循环吗？因为它在一个 for 循环中，所以我假设调用会一个接一个地进行，直到满足条件。

【问题讨论】：

你的问题不清楚。你能做一个小提琴来解释你的问题吗？
除了有效载荷和索引作为参数外，我还传递了作为数组的 FIELD，我需要对数组中的每个项目进行 http post 调用...所以如果我在 FIELD 中有 6 个项目，我会打 6 个电话...

标签： javascript angularjs for-loop http-post

【解决方案1】：

这里有几个错误。首先，return deferred.promise; 将在第一次到达时脱离该函数。所以这就是为什么它只发送第一个术语。如果您将 return 语句移到 for 循环之外，您应该会发送所有条款。

还应该解决的是您只有 1 个延迟对象附加到多个调用。每个调用都应该有一个延迟对象。下面是一个例子。

function getData(payload, index, field) {


  for (var i = 0; i < field.length; i++) {
    if (field[i]) {

      console.log("terms logged", field[i]);

      var termsData = {
        user_selection: payload,
        index_info: index,
        field: field[i]
      };

      postTerm(term);
    }
  }
}

function postTerm(term) {
  var deferred = $q.defer();

  console.log("terms data", term);

  $http({
    url: 'API',
    method: "POST",
    data: $.param(term),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then(function(response) {
    var data = response.data;

    console.log("response data", data);

    deferred.resolve(data);
  });


  return deferred.promise;
}

【讨论】：

好人！这可以按预期工作，尽管现在在我的控制器中，我得到一个“无法读取未定义的'then'的属性”......我之前在另一个电话中遇到过这个问题，但我没有正确解决承诺，所以使用 $q 服务有帮助...关于为什么会弹出这个错误有什么想法吗？

【解决方案2】：

我相信您正在寻找的是一种在循环中链接承诺的方法。这可以通过将 Promise 存储在数组中来实现，如下所示：

var promises = [];
for(...) {
    var promise = $http(...); // http calls return a promise
    promises.push(promise);

    // Or, if you prefer to use $q
    var deferred = $q.defer();
    $http(...).success(function(){
        deferred.resolve();
    });
    promises.push(deferred);
}

$q.all(promises).then(function(){
    // This will be executed when all promises inside the array have been resolved
});

虽然，我不建议做这么多请求。如果可能，请更改您的后端，使其能够交替接收对象数组。

这里有一些关于 $q https://docs.angularjs.org/api/ng/service/$q 的文档

Resolve a promise array with Angular UI Router

【讨论】：