你如何组合多个 Observables 并在一个订阅中获得所有的结果

Question

我正在多次调用 RESTful 服务。每个电话都会给我一个结果。例如，它 returns 对象类似于以下内容：

{
     results: {
          name: "Joe",
          age: 10,     
     }
}

我正在使用不同的请求参数对服务进行 5 次不同的调用，我只想在所有 5 次调用都完成并 return 编辑了它们的对象后将结果 return 发送到我的程序。我想 return 向应用程序添加 5 个对象的数组，如上面的对象。

如何在 Angular 2 中使用 Observables 完成此操作？

这是我刚才试过的方法，但我不明白为什么它不起作用：

    getImage(imageUrl: string) {

        console.log("Fetching from " + imageUrl);

        return Observable.create((o) => {
            this.httpService.get(imageUrl)
            .map(res => {
                return res.json();
            })
            .map(res => res.photos.photo[0])
            .subscribe((result) => {
                console.log(this.generateImageUrl(result));
                o.next(this.generateImageUrl(result));
            });
        });
    }

    getImages(hashtags:string[]){
        var arrayOfObservables = [];
        for (var hashtag in hashtags){
            var url = this.flickrAPI.fetchImagesByTag + hashtags[hashtag];
            var query = this.getImage(url);
            arrayOfObservables.push(query);
        }
        console.log(arrayOfObservables);
        return Observable.forkJoin(arrayOfObservables, function(){
            console.log("Fork Join Done");
            return "from Fork Join with love";
        });
    }

然后订阅部分发生在这里

onSubmit() {
        // First, clear FeedItems
        this.feedItems = [];

        var tweets$ = this.twitterService.getTweets(this.hashtagInput);

        tweets$.subscribe((tweets) => {
            for (var i in tweets) {
                var hashtags = tweets[i].entities.hashtags;
                var flicks$ = this.flickrService.getImages(hashtags);
                this.subscribeToFlicks(flicks$, tweets[i]);
            }
        });
    }


    subscribeToFlicks(flicks$, tweet) {
        console.log("Here");
        flicks$.subscribe((results) => {
            console.log("Flickr Subscription:");
            console.log(results);

            var twitterItem = new TwitterData(tweet.user, tweet.text);
            var flickrItem = new FlickrData("null", results);

            var feedItem = new FeedItem(twitterItem, flickrItem);

            this.feedItems.push(feedItem);
        });
    }

Answer 1

其实需要去掉forkJoin方法的第二个参数：

getImages(hashtags:string[]){
    var arrayOfObservables = [];
    for (var hashtag in hashtags){
        var url = this.flickrAPI.fetchImagesByTag + hashtags[hashtag];
        var query = this.getImage(url);
        arrayOfObservables.push(query);
    }
    console.log(arrayOfObservables);
    return Observable.forkJoin(arrayOfObservables);
}

第二个参数对应的是resultSelector。它允许您（如果需要）在收到所有事件时创建由 forkJoin 编辑的结果 return。如果没有指定，它将return结果作为一个数组。

并订阅 returned observable：

getImages().subscribe(() => {
  console.log("Fork Join Done");
});

因为 observable 是惰性的，没有订阅什么都不会执行...

编辑

您可以这样更新 étiAge 方法：

    getImage(imageUrl: string) {

        console.log("Fetching from " + imageUrl);

        return this.httpService.get(imageUrl)
            .map(res => {
                return res.json();
            })
            .map(res => res.photos.photo[0])
            .map(res => this.generateImageUrl(res));
    }

你如何组合多个 Observables 并在一个订阅中获得所有的结果

How do you combine multiple Observables and get the results of all in a single subscribe

observable

rxjs

angular