伙计们我喜欢将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>
答案 0 :(得分:0)
由于您对第一次调用返回的每个照片ID进行了$ http.get调用,因此您必须等待所有调用完成然后返回结果。 这样做的诀窍是创建一个延迟对象,并在结果数组已满时解析它。
看看$q,了解如何解决这个问题。请记住,您将返回一个承诺,这意味着您必须实现成功或错误回调才能获得结果数组