Question

我正在尝试使用NgRx效果处理从第一次API调用返回的数据。

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()
        .pipe(
          map(pages => {
            pages.forEach(page => {
              this._confApi.getPageVersion(page.url).pipe(map(version => page.version = version));
            });
            return pages;
          }),
          map(pages => SAVE_PAGES({pages}))
        )
      )
    )
  );

但是在这种情况下，甚至没有调用第一个映射中的API调用。我也尝试过这种方式：

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()
        .pipe(
          map(pages => {
            pages.forEach(page => {
              this._confApi.getPageVersion(page.url).subscribe(version => page.version = version);
            });
            return pages;
          }),
          map(pages => SAVE_PAGES({pages}))
        )
      )
    )
  );

在执行调用时，该值不会添加到page属性中（映射到SAVE_PAGES实际上不会等待）。

解决此问题的正确方法是什么？

Answer 1

您缺少forkJoin，以等待所有getPageVersion的可观察对象完成。

您可能想要类似的东西

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()),
      switchMap(pages => {
        return forkJoin(pages.map(page => this._confApi.getPageVersion(page.url).pipe(
          map(version => ({ ...page, version }))
        )));
      }),
      map(pages => SAVE_PAGES({ pages }))
    )
  );

通过管道通过另一个API调用在NgRx Effect中处理数据

1 个答案: