Angular嵌套的http请求

时间:2016-05-18 10:30:20

标签: angularjs angular-services angular-controller

伙计们我喜欢将http请求嵌入到flickr api中,我的目标是获取(使用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>

1 个答案:

答案 0 :(得分:0)

由于您对第一次调用返回的每个照片ID进行了$ http.get调用,因此您必须等待所有调用完成然后返回结果。 这样做的诀窍是创建一个延迟对象,并在结果数组已满时解析它。

看看$q,了解如何解决这个问题。请记住,您将返回一个承诺,这意味着您必须实现成功或错误回调才能获得结果数组