RxJS - 组合两个 HTTP GET 并行请求答案

【问题标题】：RxJS - Combine Two HTTP GET Parallel RequestsRxJS - 组合两个 HTTP GET 并行请求
【发布时间】：2022-01-25 02:00:55
【问题描述】：

我需要建议。我对 RxJS 很陌生，所以我想正确使用它。我需要从 API 获取两个不同的数组。我只想在它们都完成后才完成此操作，因为我需要将它们发送到子组件（子组件有两个相互依赖的不同列表框）。

我想将这些 Observable 存储在：

departments$: Observable<IDepartment[]>;
workers$: Observable<IWorker[]>;

这个问题的解决方案：

  departments$ = this.http.get<string[]>('api/departments')
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );

  workers$ = this.http.get<string[]>('api/workers')
    .pipe(
      tap(data => JSON.stringify(data))),
      catchError(this.handleError)
    );

  departmentsAndWorkers$ = forkJoin({
    departments$: this.departments$,
    workers$: this.workers$
  })
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    )

【问题讨论】：

标签： angular typescript rxjs observable

【解决方案1】：

您正在寻找forkJoin RxJS 运算符。当所有请求完成时，它将发出一个元组值。阅读更多信息：https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin

【讨论】：

除此之外我建议你测试一下算子决策树，它很有帮助

【解决方案2】：

您可以尝试像这样使用 forkJoin：

forkJoin([departments$,workers$]).subscribe((resp: any) => { 
   // resp[0] : departments$
   // resp[1] : workers$
  },
  errors=>{
 }
});

【讨论】：

我已经编辑了问题，你能看看并告诉我实现是否正确吗？

【解决方案3】：

您可以使用 forkJoin: 等待 Observables 完成，然后组合它们发出的最后一个值；如果传递了一个空数组，则立即完成。 https://rxjs.dev/api/index/function/forkJoin

或 combineLatest：每当任何输入 Observable 发出一个值时，它都会使用来自所有输入的最新值计算一个公式，然后发出该公式的输出。 https://rxjs.dev/api/index/function/combineLatest

【讨论】：