组合三个 observable，两个使用 forkjoin，一个使用 mergemap答案

【问题标题】：combining three observables two using forkjoin and one using mergemap组合三个 observable，两个使用 forkjoin，一个使用 mergemap
【发布时间】：2019-12-14 17:54:04
【问题描述】：

三个api调用，其中两个没有参数传递。所以我使用了 forkJoin 两个 api 调用，但第三个需要一个从前两个 api 获取的参数。我不知道如何实现它。

这是我目前的代码。

ngOnInit();
{
  const categories$ = this.blogService.getCategories(); // one
  const posts$ = this.blogService.getPosts(); // two

  forkJoin([
    categories$,
    posts$
  ]).pipe(
    map(([categories, posts]) => {
      return posts.map(post => {
        ... // doing some stuff here
        return post;
      });
    }),
    mergeMap(posts => {
      return posts.map(post => this.blogService.getFeaturedImage(post.featured_media)); // three
    }, y => console.log(y))
  ).subscribe();
}

在上面的代码中，forkJoin 可以正常工作。但第三次通话没有发生。我需要将值传递给第三个服务。怎么做？

PSy returns the value of second call as expected

【问题讨论】：

我建议将getFeaturedImage 更改为getFeaturedImages 并使其一次获取所有图像。按项目提出请求不是一个好习惯。
但是可以说，如果我有 100 个特色图片、100 个帖子和 100 个类别，那么即使我一次获得所有内容，性能也会受到影响。有什么方法可以提高性能？
发出 100 个单独的请求会严重影响性能。如果您有这样的图像范围，我建议您使用CDN。对于存储和流量以及站点负载性能会更好。

标签： angular rxjs rxjs6

【解决方案1】：

请尝试下面的代码，您返回的 observable 数组需要 forkJoin (async) 或 concat (sequential) 来执行它们

 mergeMap(posts => {
      return forkJoin(posts.map(post => this.blogService.getFeaturedImage(post.featured_media))); // three
    })

【讨论】：