ループが完全に終了するまで、ファクトリのリターンを遅らせてください。

Question

APIからオブジェクトを取得した後に、オブジェクトの配列を返すメソッドを作成しようとしています。問題は、すべてのコールが終了する前に工場からの戻りが発生することです。私は$ q.deferを使用しようとしましたが、発送準備が整う前に返品を送信します。 これまで私が思いついたのはこれです。

angular.module('watchList').factory('storageService', ['$http', '$q', function ($http, $q) { 
storage = {}; 

storage.getMovies = function() { 

    var movies = localStorage.getItem('movies'); 
    var movieArray = angular.fromJson(movies); 
    var newArray = []; 
    var defer = $q.defer(); 

    angular.forEach(movieArray, function (id) { 
      newArray.push($http.get(api + id)); 
    }); 
    $q.all(newArray).then(function (response) { 
      defer.resolve(response); 
    }); 

    return defer.promise; 
} 

これは私が、私はそれが配列を返す前に、ループはすべてを終了したい

angular.module('watchList').controller('watchListController', ['$scope', 'storageService', function ($scope, storageService) { 
$scope.movies = storageService.getMovies(); 

から電話をかけるしようとしているコントローラです。

Answer 1

あなたはちょうど$q.all(newArray)呼び出しによって返された約束を返すことができ、約束を作成する必要はありません。

非同期的にしか利用できなくなった場合、結果を同期的に取得することは期待できません。だから、thenを使用して維持する必要があります。

storage.getMovies = function() { 
    var movies = localStorage.getItem('movies'); 
    var movieArray = angular.fromJson(movies); 
    var newArray = movieArray.map(function (id) { 
     return $http.get(api + id); 
    }); 
    return $q.all(newArray); 
} 

storageService.getMovies().then(function(movies) { 
    $scope.movies = movies; 
    // ... other code working with $scope.movies 
}); 

サイドノート：map方法は、あなたがforEachで何行いますが、すぐに、非常に実用的である配列を返します。

Answer 2

getMoviesはすぐに約束を返します。あなたはその約束を待つために "then"を使う必要があります。

$scope.movies = storageService.getMovies().then((response) => ...)