如何避免嵌套訂閱 rxjs？

Question

我有一個嵌套訂閱的代碼：

      .subscribe((data) => {
        const { game, prizes } = data;
        this.ticketService.setListOfTickets(game.tickets);
        this.ticketService.getListOfTickets().subscribe((data: any) => {
          this.listOfTickets = data;
        });
        this.game = game;
        this.type = game.type;
        this.combinations = prizes.map((el: Prize) => el.patterns).flat();
      });

我如何改進此代碼以避免嵌套訂閱？

Answer 1

.pipe(
    switchMap(data => {
      this.ticketService.setListOfTickets(data.game.tickets);
      return this.ticketService.getListOfTickets().pipe(
        map(listOfTickets => ({ ...data, listOfTickets }))
      );
    })
)
.subscribe(({ game, prizes, listOfTickets }) => {
    this.listOfTickets = listOfTickets;
    this.game = game;
    this.type = game.type;
    this.combinations = prizes.map((el: Prize) => el.patterns).flat();
});

switchMap 獲取 firstCall 的結果並使用該結果切換到內部可觀察對象。

Answer 2

您可以使用 forkJoin 並將多個調用加入單個訂閱。 從您的代碼中看不到您訂閱的 function 的名稱，所以我只使用名稱： gameService.getGames()

forkJoin([this.gameService.getGames(),this.ticketService.getListOfTickets()]).subscribe((data) => {
        const { game, prizes } = data[0];
        this.ticketService.setListOfTickets(game.tickets);
        this.listOfTickets = data[1];
        this.game = game;
        this.type = game.type;
        this.combinations = prizes.map((el: Prize) => el.patterns).flat();
      });