首页 > 解决方案 > Angular中连续异步函数的问题

问题描述

getEnrolledPlayers 应该从数据库中获取一个“玩家”对象数组,然后将其传递给 matchMaking 函数。但是,它没有正确通过。

我尝试添加 observables,玩转订阅

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);
    });
}

当我调用这一系列异步函数时,注册播放器 [] 被正确计算(7 个元素的数组),但它没有被正确调用到 matchMaking() 函数。我认为这是因为异步运行时。

标签: javascripttypescriptasynchronousrxjsobservable

解决方案


是的。subscription这绝对是由于内部解析值的时间差异引起的问题。

我建议forkJoin在调用之前使用 a 并等待解决所有值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();
}

推荐阅读