Angular中连续异步函数的问题

Question

getEnrolledPlayers应该从数据库中获取一个“player”对象数组，然后将其传递给matchMaking函数。然而，它没有被正确地传递。

我试着添加可观察数据，处理订阅

initializeEvent(eventId: string) {
  const enrolledPlayers: PlayerStat[] = [];
  this.getEnrolledPlayers(eventId)
    .subscribe((playerIds: string[]) => {
      for (const playerId of playerIds) {
        this.dataService.fetchSinglePlayer(playerId)
          .subscribe((playerStat: PlayerStat) => enrolledPlayers.push(playerStat));
      }
      this.matchMaking(enrolledPlayers);
    });
}

当我调用这一系列异步函数时，enrolledPlayers[]计算正确(由7个元素组成的数组)，但是没有正确地调用matchMaking()函数。我认为这是因为异步运行时。

Answer 1

是。这肯定是由于内部subscription解析某个值的时间差而导致的问题。

我建议在调用matchMaking之前使用并等待解析所有的值。

试一试：

initializeEvent(eventId: string) {
  const enrolledPlayers: PlayerStat[] = [];
  this.getEnrolledPlayers(eventId)
    .subscribe((playerIds: string[]) => {
      const playerInfos$ = playerIds.map(playerId => this.dataService.fetchSinglePlayer(playerId));
      forkJoin(...playerInfos$)
        .subscribe(enrolledPlayers: PlayerStat[] => this.matchMaking(enrolledPlayers));
    });
}

或使用一个subscribe

initializeEvent(eventId: string) {
  const enrolledPlayers: PlayerStat[] = [];
  this.getEnrolledPlayers(eventId)
    .take(1)
    .switchMap((playerIds: string[]) => {
      const playerInfos$ = playerIds.map(playerId => this.dataService.fetchSinglePlayer(playerId).take(1));
      return forkJoin(...playerInfos$);
    })
   .tap(this.matchMaking)
    .subscribe();
}

Answer 2

这是一个嵌套的订阅反模式...你永远不要嵌套订阅，这是使用高阶运算符应该是什么样子的：

initializeEvent(eventId: string) {
  this.getEnrolledPlayers(eventId)
    .pipe(
      switchMap(playerIds => 
         forkJoin(playerIds.map(playerId => this.dataService.fetchSinglePlayer(playerId)))
      )
    ).subscribe((enrolledPlayers) => 
      this.matchMaking(enrolledPlayers)
    );
}

使用switchMap切换到一个新的观察值，然后使用forkJoin并行运行多个观察值