angular - angular複数の連続したHTTPリクエストをループで実装する方法（新しいリクエストはそれぞれ、以前の結果に依存します）

Question

ロードする大量のデータを含むグリッドがあるため、ロード時間が管理できなくなりました。私が見つけた解決策は、グリッド上のすべてのデータを満たすまで、一連の数の http 要求を実行し、それぞれが 100 行のバッチを取得することでした。concatMap を使用して 2 つの連続した http 要求を実装する方法を知っていますが、完全に機能しますが、各応答を検証する while ループが必要で、現在の行数 < 合計行数の場合は、新しい Http 要求をサブスクライブします。これに対する解決策が見つからないのは奇妙です。おそらく、この解決策の最初から間違っていると考えています:D どんな助けも大歓迎です! 前もって感謝します！

concatMap を使用して 2 つの http 要求を実行するために使用される転送コード:

private LoadGridStringResourcesInProject(projectId: number) {
let allData: StringResource[] = [];
const batchSize = 100;

this.stringResourcesService.getStringResourcesInProject(projectId, 0, batchSize)
    .pipe(
      concatMap(firstData => {
        const stringResourcesInProject = firstData as StringResource[];

        // Loads first 100 rows on the Grid
        this.gridApi.updateRowData({ add: stringResourcesInProject });
        this.agGridService.refreshSizeColumns(this.agGrid);

        // Fetch data returned by partial Http requests
        allData = stringResourcesInProject;

        if (allData && allData.length == batchSize) {

          // Do new Http request to fetch the remaining data
          return this.stringResourcesService
            .getStringResourcesInProject(projectId, batchSize, 0);
        }

        return [];
      })
    ).subscribe(data => {
        const stringResourcesInProject = data as StringResource[];

        // Loads the remaining rows in the Grid
        this.gridApi.updateRowData({ add: stringResourcesInProject });

        // Fetch data returned by partial Http requests
        allData = allData.concat(stringResourcesInProject);
      },
      error => of(null),
      () => {
        this.agGridService.refreshSizeColumns(this.agGrid);
      });

}