如何避免在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并将多个调用连接到单个订阅中。从你的代码是不可见的，你订阅的函数的名称，所以我只是使用名称: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();
});