角度のついたHTTPリクエスト

Question

私はflickr apiへのHTTPリクエストをネストしたいと思っています。私の目標は、（flickr.photos.searchを使用して）写真のID（ 'text'を介して）を取得してから、 photos.getSizesとソース画像への直接リンクを取得します。

ここに私のコードがありますが、他のアイデアはあなたから素敵です。問題は、PhotoSearchServiceがすべての$ http呼び出しを返したことです。どんな良いアイデアですか？

サービス：

angular.module('flickrGalleryApp').factory('PhotoSearchService', function ($resource) { 
    const apiKey = '&api_key=my api key'; 
    const apiUrl = 'https://api.flickr.com/services/rest/?method='; 
    const method = 'flickr.photos.search'; 
    const format = '&format=json'; 
    const callback = '&nojsoncallback=1'; 

    return $resource(null,null, { 
    search : {url:apiUrl+method+apiKey+format+callback,method: 'GET', isArray: false} 
    }); 
}); 

コントローラー：

$scope.items = PhotoSearchService.search({text:'girl'}, function(response){ 
    var array = response.photos.photo; 

    const apiKey = '&api_key=my api key'; 
    const apiUrl = 'https://api.flickr.com/services/rest/?method='; 
    const method = 'flickr.photos.getSizes'; 
    const format = '&format=json'; 
    const callback = '&nojsoncallback=1'; 
    var result = []; 
    for(var i = 0 ; array.length; i++){ 
     var id = array[i].id; 
     var url = apiUrl+method+apiKey+format+callback + '&photo.id=' + id; 
     console.log(url); 
     $http.get(url).then(function(resp){ 

     var array2 = resp.data.sizes.size; 

     for(var j = 0; j < array2.length ;j++){ 
      if(array2[j].label.indexOf('Square') > 0){ 
      result.push(array2[j].source); 
      } 
     } 
     return result; 
     }, function(err){ 

     }) 
    } 
    },function(error){ 

    }); 

は、HTML：

<ul> 
     <li ng-repeat="item in items"> 
     <span>{{item.source}}</span> 
     </li> 
    </ul> 

Answer 1

あなたが最初の呼び出しによって返されたそれぞれの写真のIDのための$ http.get電話をかけるので、すべての呼び出しが完了してから結果を返すのを待たなければなりません。 これを行うには、結果配列が一杯になったときに遅延オブジェクトを作成して解決することが必要です。

$qをご覧になり、この問題を解決する方法をご覧ください。お約束を返すことになります。つまり、結果の配列を得るために成功またはエラーのコールバックを実装する必要があります。