javascript - 循环遍历 Angular HTTP 请求中的对象，等待响应后再运行下一个循环

Question

我有这个代码:

// HTTP request
$http.get(dataSource).
then(function(data, status, headers, config) {
    // Products array
    var products = [];

    // Loop through each array value
    for (var slug in data.data){

        var product = data.data[slug];
        $http.get('content/products/' + product + '.json').then(function(response){

            products.push(response.data);
            $scope.products = products;

        }).catch(function(){

            console.log('there was an error');

        });

    }

}).catch(function(){
    console.log('there was an error');
});

问题是有时产品范围数组项并不总是按照请求的顺序到达。

我需要产品 $scope 循环遍历数组，并且仅当响应已推送到数组时:

products.push(response.data);

最终分配给变量$scope.products。

对修改我当前的 HTTP 请求有帮助吗？

Answer 1

问题出在 for 循环上，它是同步的，包含异步代码。实际上，不能保证内部 http.get 处理数据的顺序与 get 的顺序相同。

试试这个:

// HTTP request
$http.get(dataSource).
  then(function(data, status, headers, config) {
    // Products array
    var products = [];

    // Loop through each array value
    var promises = [];
    for (var slug in data.data){

      var product = data.data[slug];
      promises.push($http.get('content/products/' + product + '.json'));
    }

    $q.all(promises).then(function(response){

      for (var i=0,len = response.length;i<len;++i){

        products.push(response[i].data);

      }
      $scope.products = products;

    }).catch(function(){

        console.log('there was an error');

    });

  }).catch(function(){

    console.log('there was an error');

  });

我建议使用 $q.all() 来保留 http.get 结果的顺序。另请注意，$scope.products 位于 for 循环之后，该循环将数据值分配给您指定的 products 数组。