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

Question

我正在使用Observables,我有一个用例,其中:

1. 我必须得到服务的"页面"给我 Page[]
2. 对于每个"页面",我必须从其他服务获得"部分"
3. 此外,在订阅所有这些"部分"时,我必须根据返回的数据执行一些操作.

关注的是,一旦完成所有这些请求,就必须采取一些行动.

Answer 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([]);
    });
}

Answer 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()运营商把参数作为一个选择器功能，可以让你与所有的源观测量的结果工作。我用它来更新原始pages数组并返回它。