Angular 嵌套的 http 请求答案

【问题标题】：Angular nested http requestsAngular 嵌套的 http 请求
【发布时间】：2016-09-14 18:46:11
【问题描述】：

我想将 http 请求嵌套到 flickr api，我的目标是获取（使用 flickr.photos.search）照片的 ids（通过“文本”参数化），然后再次调用 flick.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>

【问题讨论】：

标签： angularjs angular-services angular-controller

【解决方案1】：

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

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

【讨论】：