我们可以在 RxJS 模式中使用 async/await 吗？

Question

我有以下场景。

如果用户输入的路线只有/lobby 而没有?competitionId= 我必须在状态上搜索用户最喜欢的比赛。收到用户最喜欢的比赛后，我必须将用户重定向到/lobby?competitionId=XYZ。

我正在使用以下代码。是更好的实施方式吗？这对我来说就像一个回调地狱。我正在使用 NGRX。

RxJS 流可观察方式

redirectToCompetition(): void {
this._store.pipe(select(routerSelectors.getState)).subscribe(routerState => {
  if (!routerState.queryParams.competitionId) {
    this._store
      .pipe(select(authenticatedUserSelectors.getFavoriteCompetition))
      .subscribe(favoriteCompetition => {
        this._store.dispatch(
          new routerActions.NavigateTo({
            path: ['/lobby'],
            query: { competitionId: favoriteCompetition.id }
          })
        );
      });
  }
});
}

我使用 async/await 重写了代码。它看起来更好。

承诺异步/等待方式

async redirectToCompetitionPromise() {
    const routerState = await this._store
      .pipe(select(routerSelectors.getState))
      .first()
      .toPromise();

    const userFavoriteCompetition = await this._store
      .pipe(select(authenticatedUserSelectors.getFavoriteCompetition))
      .first()
      .toPromise();

    if (!routerState.queryParams.competitionId) {
      this._store.dispatch(
        new routerActions.NavigateTo({
          path: ['/lobby'],
          query: { competitionId: userFavoriteCompetition.id }
        })
      );
    }
  }

使用带有异步/等待模式的 RxJS 有什么问题吗？或者在我的第一个代码中我的实现很糟糕？

Answer 1

用 rxjs 使用 async/await 和 promise 没有错，只要使用得当，rxjs 本身已经可以很好地处理它

this._store
.pipe(select(routerSelectors.getState))
.first()
.filter(routerState =>routerState.queryParams.competitionId)
.switchMap(()=>this._store.pipe(select(authenticatedUserSelectors.getFavoriteCompetition)))
.do(favoriteCompetition =>
        this._store.dispatch(
          new routerActions.NavigateTo({
            path: ['/lobby'],
            query: { 
            competitionId: favoriteCompetition.id }
          })
        );
      ).subscribe()