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

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()运算符将选择器函数作为参数，该函数可让您处理所有源 Observables 的结果。 我正在使用它来更新原始pages数组并返回它。