递归 $http.get 在 for 循环中答案

【问题标题】：Recursive $http.get in for loop递归 $http.get 在 for 循环中
【发布时间】：2016-05-20 19:56:44
【问题描述】：

我使用 Angular 1.5。我有一个查询类别的函数，然后对于每个类别，它都会查询产品。我想在检索到所有产品后显示一条消息，检索了多少。它输出0。解决方案是什么？

function getProducts() {
  vm.categories = [];
  var prodcount = 0;

  $http.get("localhost/menu/1/categories")
    .then(function(response) {
      var categories = response.data;
      angular.forEach(categories, function(cat) {
        $http.get("localhost/category/" + cat.id + "/products")
          .then(function(response) {
            cat.products = response.data;
            vm.categories.push(cat);
            prodcount += cat.products.length;
          });
      });
      $mdToast.show($mdToast.simple().textContent("retrieved " + vm.categories.length + " categories and, " + prodcount + " products!."));
    });
}

【问题讨论】：

你没有一个端点来获取你所有的产品？？这看起来很奇怪，肯定会影响你的表现
您可以使用$q.all 等待许多promise 解决，请参阅stackoverflow.com/questions/23931846/…。此外，您可能希望在执行下一个呼叫之前等待每个呼叫完成，以免服务器过度饱和。最好的当然是在一个服务器调用中检索所有内容，而不是客户端循环。
我一直在 Angular 中使用带有 AJAX 请求的“提供者”。
MayK，你是对的。我试图解决这个问题，甚至想不出其他任何事情。我将使它成为一个查询以获取所有内容。

标签： angularjs http for-loop asynchronous promise

【解决方案1】：

您应该了解异步请求和承诺的工作原理。要使您的代码运行，您可以这样做： var 承诺 = []; // 创建一个数组来存储 promises

angular.forEach(categories, function(cat) {

    // Capture the promise
    var requestPromise = $http.get(...)
    .then(function(response) {
        ...
    });
    promises.push(requestPromise);  // Add it to the array
  });

  // This promise will be resolved when all promises in the array have been resolved as well.
  $q.all(promises).then(function(){
     $mdToast.show(...);
  })

});

但是这种方法不太好。你应该尽量减少请求的数量，最好只做一个。

http://www.martin-brennan.com/using-q-all-to-resolve-multiple-promises/ http://andyshora.com/promises-angularjs-explained-as-cartoon.html

【讨论】：

【解决方案2】：

您可以将您的类别数组映射到一组承诺，然后使用$q.all 等待它们全部完成

function getProducts() {
    vm.categories = [];
    var prodcount = 0;

    $http.get("localhost/menu/1/categories")
            .then(function (response) {
                var categories = response.data;
                $q.all(categories.map(function (cat) {
                    return $http.get("localhost/category/" + cat.id + "/products")
                            .then(function (response) {
                                cat.products = response.data;
                                vm.categories.push(cat);
                                prodcount += cat.products.length;
                            });
                })).then(function () {
                    $mdToast.show($mdToast.simple().textContent("retrieved " + vm.categories.length + " categories and, " + prodcount + " products!."));
                });
            });
}

【讨论】：