使用 Angular RxJs Observables 处理多个 http 请求并等待所有请求完成答案

【问题标题】：Handle multiple http requests and wait for all to complete using Angular RxJs Observables使用 Angular RxJs Observables 处理多个 http 请求并等待所有请求完成
【发布时间】：2017-06-28 03:06:49
【问题描述】：

我正在使用 Observables，我有一个用例：

我必须从服务中获取“页面”，这给了我Page[]
对于这些“页面”中的每一个，我都必须从其他服务中获取“部分”
此外，在订阅所有这些“部分”时，我必须根据返回的数据执行一些操作。

问题是，一旦所有这些请求都完成了，就必须采取一些行动。

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

你需要使用 mergeMap 和 forkJoin

当使用forkJoin 时，您可以同时触发并行请求，它会等待所有请求完成。

this.http.get('/api/pages/')
    .map((res: any) => res.json())
    .mergeMap((pages: any[]) => {
      if (pages.length > 0) {
        return Observable.forkJoin(
          pages.map((page: any) => {
            return this.http.get('/api/sections/' + page_id)
              .map((res: any) => {
                let section: any = res.json();
                // do your operation and return
                return section;
              });
          });
        );
      }
      return Observable.of([]);
    });
}

【讨论】：

【解决方案2】：

一般来说，当嵌套异步调用时，尽量保持平坦。否则，您将创建回调地狱，这使得事情比仅使用常规迭代代码更加复杂：

this.http.get('/api/pages/')
  .map((res: Response) => res.json())
  .concatMap((pages: Page[]) => {
    const observables = pages.map(p => this.http.get('whatever' + p.id));

    return Observable.forkJoin(observables, (...results) => 
      results.map((result, i) => {
        pages[i].sections = result;
        return pages[i];
      })
    )
  })
  .subscribe(pagesWithSections => ...);

forkJoin() 运算符将选择器函数作为参数，该函数允许您使用所有源 Observables 的结果。我正在使用它来更新原始的pages 数组并返回它。

【讨论】：