RxJS

Question

我需要建议。我对 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)
    )

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

RxJS - Combine Two HTTP GET Parallel Requests

observable

typescript

angular