Question

我试图了解 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

Answer 1

在这里，我已经完成了 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;
});

摆脱订阅中的订阅

1 个答案: