摆脱订阅中的订阅

如何解决摆脱订阅中的订阅

我试图了解 RxJS flatMap 是如何摆脱另一个订阅中的订阅的：

this.http.get<IFilm>(`https://swapi.dev/api/films/${id}/`).subscribe(res => {
  this.film = res;
  this.film.characters.map((url: string) => {
    this.http.get<IActor>(url).subscribe(res => {
      this.name = res;
      this.NameList.push(this.name)
    })
  })

});

解决这个问题的好方法是什么？是否可以在方法中执行此操作，或者我应该使用 2 或类似这里的管道：

https://stackblitz.com/edit/angular-dlony2?file=src%2Fapp%2Fstar-wars.service.ts

解决方法

在这里，我已经完成了 RxJS 的工作，即不将任何副作用放入您的转换/数据管道中，并将它们全部保存给最终消费者（订阅）。

这应该可以更轻松地测试、扩展和维护您的代码。

通常，您的最终消费者应该是 UI 或某种数据库。很少有理由让您的最终消费者只设置一个全局变量，但这就是我现在离开的地方。

this.http.get<IFilm>(`https://swapi.dev/api/films/${id}/`).pipe(  
  map(film => ({
    film,nameCalls: film.characters.map(
      url => this.http.get<IActor>(url)
    )
  })),mergeMap(({film,nameCalls}) => forkJoin(nameCalls).pipe(
    map(names => ({film,names}))
  ))
).subscribe(({film,names}) => {
  this.film = film;
  this.nameList = names;
});