Angular $ q.all（）有麻烦

Question

我有一个工厂正在发出$ http请求的n个数字，为​​了实现此目的，我使用了$ 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

您已经掉入了一个阴险的bug，称为“关闭循环变量”。 deferred变量的值在循环的每次迭代中都会更改，因此最终执行时：

deferred.resolve(response);

deferred是指deferred变量采用的最后一个值。

最重要的是，您正在使用Explicit Promise Creation Antipattern，这是一种使您的Promise代码不必要地盘绕且容易出错的反模式。

通过使用promises解决应该解决的两个问题：

 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); } } }])