如何确保$ http请求在循环内按顺序执行

时间:2017-07-13 22:31:27

标签: javascript jquery angularjs ajax angular-promise

我需要发出ajax链请求。

function _GetCustomerDetails() {
  //Customer
  for (var i = 0; i < 5; i++) {
    dataService.get(sData, 'Customer').then(function(data) {
      if (data.entity === "Customer" && data.rows != undefined && data.rows.length > 0) {
        var len = data.rows.length;
        for (var i = 0; i < len; i++) {
          if (data.rows[i] != undefined) {
            //load related entity
            dataService.get(data.CustomerId, 'CustomerRelatedEntity').then(function(data) {
            });
          }
        }
      }
    });
  }
}

但是,客户数据正在加载正常,但嵌套的相关实体加载不正确。它用最后一个填充所有数据。(即指数= 4的客户

这就是我的数据服务的样子。

 angular
  .module('app')
  .service('dataService', dataService);

dataService.$inject = ['$http', '$q'];

function dataService($http, $q) {
  var service = {
    get: _get,

  }
  return service;

  function _get(data, tableName) {
    var deferred = $q.defer();
    var url = "API_Url";
    return $http({
        method: 'GET',
        url: url,

      })
      .then(success)
      .catch(exception);

    function success(response) {
      deferred.resolve(response.data);
      return deferred.promise;
    }

    function exception(ex) {
      deferred.reject(response);
      return deferred.promise;
    }

  }

1 个答案:

答案 0 :(得分:1)

您可以使用tj/co之类的生成器轻松完成此操作。这样,一旦您的承诺被收回,您的循环步骤将被转发。如果data.rowsarray,则此示例可以正常工作。

function _GetCustomerDetails() {
  dataService.get(sData, 'Customer').then(function(data) {
    if (data.entity === "Customer" && data.rows != undefined && data.rows.length > 0) {
      co(function*() {
        for (var i = 0; i < data.rows.length; i++) {
          let data = yield new Promise(function(resolve, reject) {
             dataService.get(data.rows[i].CustomerId, 'CustomerRelatedEntity').then(function (result) {
                resolve(result);
             });;
          });
          console.log(data);
        }
      });
    }
  });
}

重现您的问题

请看一下 demo fiddle ,它会重现您的问题。如您所见,循环在所有请求响应/完成之前完成。

解决您的问题

请看一下 demo fiddle ,这是解决问题和同步循环的一种方法。如您所见,循环在开始下一个循环序列之前等待所有请求完成。