时间戳

首页 > 解决方案 > Angular 11：并行获取所有页面

angular - Angular 11：并行获取所有页面

问题描述

有一个外部 API 返回所有项目，如下所示：

{
 page : 1,
 per_page : 10,
 total : 200,
 items : [],
}

我想获取所有页面。例如：在上述场景中，总页数 = 20（总/每页，即 200/10）

进行第一次调用并知道页数然后并行进行其余所有调用并将其合并的最佳方法是什么？

使用 Angular 11 - concatMap、flatMap、forkJoin 等。

解决方案：

基于@Michael 评论的更新代码，如下所示：

getAllItems(): void {
    this.itemService.getItemsByPage(1).pipe(
        switchMap((itemPage: ItemPage) => {
          const totalPages = Math.ceil(itemPage.total/itemPage.per_page);
          const req$ = Array(totalPages).fill(1).map((_, index) =>
            this.itemService.getItemsByPage(index + 1)
          );
          return forkJoin(req$);
        })
      ).subscribe(
        res => {
          for (let page = 1; page <= res.length; page++) {
            //Collect all responses using res[page] 
          }
        },
        error => { 
          console.log("Error Fetching Items");
        }
      );
  }

标签： angularparallel-processing

解决方案

您可以调用 API 以检索所有可用页面和项目总数，然后实现一些逻辑以使用 forkJoin 并行调用 API 以获取您拥有的页面数

推荐阅读