使用$ resource在循环内调用Ajax

时间:2015-10-03 12:20:44

标签: ajax angularjs angular-promise angular-resource

我很难正确地进行这项操作。

我有一个订单,我必须从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收到请求并发回数据,但承诺不会返回任何内容......

此处还有一个错误来自jshint:Don't make functions within a loop.

为我解决这两个问题会很好...我试图创建一个外部函数但是有同样的问题没有返回数据我不知道我做得好,我正在做的外部函数是:

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

2 个答案:

答案 0 :(得分:2)

您正在从代码进行异步调用,并认为它将同步工作。当您在工厂外向itemArray分配$scope.order.order_items时,itemArray为空。在进行该任务之前,您需要确保所有ajax调用已完成每个项目。您可以使用$q.all来表示此类情况。 $q.all需要一个承诺数组&amp;当所有承诺得到解决时,它将调用.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")
    });

}

答案 1 :(得分:0)

我会避免读取和写入相同的数组,而是使用另一个数组作为实际项目。

当Resource返回一个成功填充的实例时,您可以直接将实例添加到范围。通过这种方式,您可以大量减少代码并删除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}));
  }
}