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