Angular NGRX将大阵列分为大块，并结合了API请求结果

Question

因此，问题在于我有大量的对象，假设我需要以NGRX效果发送给我们的API，然后派遣与响应的新操作，但是API花费的时间太长来处理如此大的请求。有一次，所以我想将这个数组分成较小的块，然后将每个数组接一个地发送一个请求，然后将所有响应从所有响应结合到一个动作中。我已经尝试将这些大量数据映射到带有（） operator的 的一系列可观察结果中，但是在映射之后无法弄清楚接下来要使用的是什么，我尝试了铸造它可以承诺并使用Promise.all（），但再次没有运气。总而言之，我需要做的是：

1. 操作触发了一个效果，需要将API调用带有动作中的一系列数据发送，
2. 从而将一系列数据分为100个对象的块，
3. 这些块被映射到API请求中，一个接一个地发送，每个请求都需要与先前的响应与先前的响应结合在一起，
4. 在完成所有这些请求之后，需要派遣带有合并响应的操作才能更新存储。

这是我当前正在使用的简化效果，我需要分割的是 action.rows ：

loadRows$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(RowsActions.LoadRows),
    switchMap((action) => {
      return this.eventsService.getBatchRows(action.rows).pipe(
        switchMap((response) => {
          return [
            new RowsLoaded({ rows: response.rows }),
            new LoadedTableData(response.rows),
          ];
        }),
        catchError(() => {
          return of(new RowsFailedToLoad());
        })
      );
    })
  );
});

Answer 1

已经实现了相似逻辑，
如果一个块将有100件物品 - 仍然很大。

我正在运行所有Paralelly的物品。

upd：

如果您将更改 Mergemap concatmap - 所有调用将为序列

这里的单行或一块行

        from(action.rows)
            .pipe(
                mergeMap(id => api(id).pipe(catchError(e => EMPTY))),
                toArray())
             )

是有效的示例：

最终版本：

const { of, from } = require("rxjs");
const {
  switchMap,
  concatMap,
  toArray,
  catchError,
  map,
  tap
} = require("rxjs/operators");

const chunkArray = (arr, size) =>
  arr.length > size
    ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
    : [arr];
const getBatchRows = (rows) => of({ response: { rows } });

of({ rows: ["id1", "id2", "id3", "id4", "id5"] })
  .pipe(
    switchMap((action) =>
      from(chunkArray(action.rows, 2))
        .pipe(
          concatMap((rows) =>
            getBatchRows(rows).pipe(catchError((e) => of({})))
          )
        )
        .pipe(toArray())
    ),

    tap((data) => console.log(data)),
    map((responseArray) => responseArray.map((i) => i.response.rows).flat()),
    map(rows => [
      new RowsLoaded({ rows }),
      new LoadedTableData(rows),
    ])
  )
  .subscribe((data) => {
    console.log(data);
  });

使用块方式 - 几乎没有什么可用的方法

将

const chunkArray = (arr, size) =>
  arr.length > size
    ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
    : [arr];

在此处使用和使用：

 from(chunkArray(action.rows, 100))

//and change this
 mergeMap(rows => this.eventsService.getBatchRows(rows)