Ajax 使用 $resource 在循环中调用

Question

我很难正确地完成这个操作。

我有一个订单，对于每个项目，我都必须从 API 获取数据，我正在做的是：

if ($scope.order.order_items.length > 0) {
    var itemArray = [];
    for (var i = 0; i < $scope.order.order_items.length; i++) {
      var itemId = $scope.order.order_items[i].id;
      Items.get({
        itemId: itemId
      }).$promise.then(function (data) {
        itemArray.push(data.item);
      });
    }
    $scope.order.order_items = itemArray;
  }

API 收到请求并发回数据，但承诺不会 return 任何东西...

这里还有一个错误来自 jshint：Don't make functions within a loop.

如果能为我解决这两个问题就好了...我尝试创建一个外部函数但遇到了同样的问题而不是 returning 数据我不知道我是否做得很好，我做的外部函数是：

function addItem(id) {
    Items.get({
      itemId: id
    }).$promise.then(function (data) {
      console.log(data);
      return data.item;
    });
  }

Answer 1

您正在从代码中进行异步调用，并认为它会像同步一样工作。因为你在厂外给itemArray赋值给$scope.order.order_items，那时候itemArray是空白的。在进行分配之前，您需要确保每个项目的所有 ajax 调用都已完成。对于这种情况，您可以使用 $q.all。 $q.all 需要一个 promise 数组，它会在所有 promise 得到解决后调用 .then 函数。

if ($scope.order.order_items.length > 0) {
    var itemArray = [], promiseArray = [];
    for (var i = 0; i < $scope.order.order_items.length; i++) {
      var itemId = $scope.order.order_items[i].id;
      var currentPromise = Items.get({
        itemId: itemId
      }).$promise.then(function (data) {
         itemArray.push(data.item);
         return true; //returning dummy value from promise.
      });
      promiseArray.push(currentPromise); //creating promise array
    }
    $q.all(promiseArray) //giving promise array input.
    .then(function(data){ //success will call when all promises get resolved.
        $scope.order.order_items = itemArray;
    },function(error){
        console.log("Error occured")
    });

}

Answer 2

我会避免读取和写入同一个数组，而是使用另一个数组来存储实际项目。

作为资源 returns 成功填充的实例，您应该可以直接将实例添加到范围中。这样你就减少了很多代码并删除了 jshint 警告。

if ($scope.order.order_items.length > 0) {
  $scope.order.order_items_with_data = [];

  for (var i = 0; i < $scope.order.order_items.length; i++) {
    var itemId = $scope.order.order_items[i].id;

    $scope.order.order_items_with_data.push(Items.get({itemId: itemId}));
  }
}

Ajax 使用 $resource 在循环中调用

Ajax call within a loop using $resource

ajax

angularjs

angular-resource

angular-promise