Angular $q.all() 的问题

Question

我有一个工厂正在发出“n”个 $http 请求，为了实现这一点，我正在使用 $q.all()，所以让我向您展示我的工厂代码。

app.factory('loadBooks',['$http','$q',function($http,$q){
  var promises = [];
    return {

        getBooks : function(category,no){
          for(var i =1; i<=no; i++){
        var deferred = $q.defer();

                 console.log(i + 'request');
                 $http.get(`https://anapioficeandfire.com/api/${category}?page=${i}&pageSize=10`)
                 .then(function(response){
                  deferred.resolve(response);
                  console.log(response);
                })

        .catch(function(response){
          deferred.reject(response);
        })
        
        promises.push(deferred);
      
        }

          return $q.all(promises);
          
        }
      }

}])

这是我调用工厂函数的控制器

app.controller('bookController',['$scope','loadBooks','$routeParams',function($scope,loadBooks,$routeParams){
    $scope.count = $routeParams.no;
    loadBooks.getBooks('books',2).then(function(data){
          $scope.books = data;   
       })
       .catch(function(response){
       });
    }]);

现在的问题是我正在从 getBooks 方法发出 2 个请求，并且 api 正在向我发送这两个请求的数据，但由于某种原因，第一个请求在 promise 数组中没有推送任何数据，但第二个请求确实如此。我不知道我做错了什么。该 api 工作正常，因为我可以看到我的网络选项卡中的数据，但是来自第一个请求的数据没有被推送到 promise 数组中！ 如果您能告诉我问题出在哪里，我将不胜感激。顺便说一句，我是 $q 的新手。

Answer 1

您陷入了一个名为“关闭循环变量”的潜在错误中。 deferred 变量的值在循环的每次迭代中都会发生变化，所以当它最终执行时：

deferred.resolve(response);

deferred 指的是deferred 变量所采用的last 值。

最重要的是，您正在使用 Explicit Promise Creation Antipattern，这种反模式会导致您的 Promise 代码不必要地复杂且容易出错。

以应有的方式使用 Promise 来解决这两个问题：

app.factory('loadBooks', ['$http', '$q', function($http, $q) {
  return {
    getBooks: function(category, no) {
      var promises = [];

      for (var i = 1; i <= no; i++) {
        console.log(i + 'request');
        promises.push(
            $http.get(`https://anapioficeandfire.com/api/${category}?page=${i}&pageSize=10`)
        );
      }

      return $q.all(promises);
    }
  }

}])