如何在rxjs（Angular）中使用不同的参数多次重复相同的网络请求？

Question

我有一个 mat-table 元素和mat-paginator下面的一个元素。该表填充了来自 API 的数据。默认情况下，我的 API 按请求返回 10 个元素，但我需要在表中显示 25 个元素，因此我需要发出 3 个 API 请求来填充 mat-table。

如何使用不同的参数重复调用 API，然后将所有三个响应合并为一个可观察值？

就我而言 - 我想getPlanetsPage(pageNumber)用不同的重复pageNumber，所以这是棘手的部分（我试图通过repeat()...解决这个问题）：

return this.planetService.getPlanetsPage(dontKnowHowToDoItArg)
  .pipe(
    repeat(Math.ceil(this.paginator.pageSize / this.countOfPlanetsPerPage))
  );

ngAfterViewInit() 的完整代码：

this.paginator.page
  .pipe(
    startWith({}),
    switchMap((paginatorData) => {
      this.isLoadingResults = true;

      const indexOfFirstElementToRenderInTable = this.paginator.pageSize * this.paginator.pageIndex;
      if (this.planets[indexOfFirstElementToRenderInTable]) {

        this.planetsToRender = this.planets.slice(indexOfFirstElementToRenderInTable, this.paginator.pageSize * (this.paginator.pageIndex + 1));
        return EMPTY;
      } else {
        return this.planetService.getPlanetsPage(dontKnowHowToDoItArg)
          .pipe(
            repeat(Math.ceil(this.paginator.pageSize / this.countOfPlanetsPerPage))
          );
      }
    }),
    map(planetsPage => {
      this.isLoadingResults = false;
      this.isRateLimitReached = false;
      this.resultsLength = planetsPage.count;
      return planetsPage.results;
    }),
    catchError(() => {
      this.isLoadingResults = false;
      this.isRateLimitReached = true;
      return of([]);
    })
  ).subscribe((planetsArr: Planet[]) => {
    this.planets.push(...planetsArr);
    const indexOfFirstElementToRenderInTable = this.paginator.pageSize * this.paginator.pageIndex;

    this.planetsToRender = this.planets.slice(indexOfFirstElementToRenderInTable, this.paginator.pageSize * (this.paginator.pageIndex + 1));
    this.requestNo++;
  });

http服务获取方法：

getPlanetsPage(pageNumber): Observable<any> {
  return this.httpClient.get(this.planetsBasicPageUrl, {
    params: new HttpParams()
      .set('page', pageNumber.toString())
  });
}

Answer 1

希望这可以帮助。

// demonstrate combining 3 API requests into 1
loadPage(i: number) {
  this.result$ = combineLatest(
    [i * 3, i * 3 + 1, i * 3 + 2].map((i) => this.getAPI(i))
  ).pipe(map(([a, b, c]) => [...a, ...b, ...c]));
}

// simulate an API request
getAPI(page = 0) {
  let pageResult = [];
  for (let i = page * 10; i < (page + 1) * 10; i++) {
    pageResult.push({
      row: i,
      text: (Math.random() * Number.MAX_SAFE_INTEGER).toString(36),
    });
  }
  return of(pageResult)
    .pipe(delay(Math.random() * 200 + 200)); // simulate variant response times
}