为什么我应该使用 mergemap 而不是嵌套的 http 调用?
Why I should use mergemap instead of nested http call?
我在 RXJS 库的帮助下创建了嵌套的 http 调用:
this.http.get('/api/people/1').subscribe(character => {
this.http.get(character.homeworld).subscribe(homeworld => {
character.homeworld = homeworld;
this.loadedCharacter = character;
});
但我的一些同事告诉我,使用流和 RXJS 从 API 获取数据的正确方法是:
this.homeworld = this.http
.get('/api/people/1')
.pipe(mergeMap(character => this.http.get(character.homeworld)));
请告诉我为什么第二种方法比第一种好。为什么我应该使用
mergemap 以及为什么它比使用嵌套的 http 调用更好? ?
这与嵌套的 http 调用无关,它与嵌套订阅有关,它是 RxJS 反模式。
RxJS 是一个以反应式和声明式方式解决问题的库。这意味着您在应用程序中的数据流应该被描述为流。 RxJS 中的良好模式假设整个流程应该写成一个延迟加载的流。在您的情况下,整个流程是:fetch person with id=1 -> determine homeworld -> fetch homeworld
。因此,您实际上并不介意个人详细信息,而是 homeworld
。
请注意,在第二种情况下,您不调用任何 http 方法,您只编写惰性流。它允许您就地使用此流或在不存储状态的情况下在另一个地方订阅它。这是一个巨大的优势,您无需关心状态或中间状态(命令式方法)。
此外,当您使用 .subscribe()
时,您创建的订阅应在 service/component 生命周期中进行管理。如果您创建一个流,则只创建一个订阅,因此订阅管理更容易。
我知道,http.get/post observable 在获取数据后完成,但是如果您将组件留在进行 http 调用的地方怎么办?代码将在不存在的范围内执行 side-effects。
我认为您也可以在 https://medium.com/angular-in-depth/when-to-subscribe-a83332ae053
中找到很好的解释
我在 RXJS 库的帮助下创建了嵌套的 http 调用:
this.http.get('/api/people/1').subscribe(character => {
this.http.get(character.homeworld).subscribe(homeworld => {
character.homeworld = homeworld;
this.loadedCharacter = character;
});
但我的一些同事告诉我,使用流和 RXJS 从 API 获取数据的正确方法是:
this.homeworld = this.http
.get('/api/people/1')
.pipe(mergeMap(character => this.http.get(character.homeworld)));
请告诉我为什么第二种方法比第一种好。为什么我应该使用 mergemap 以及为什么它比使用嵌套的 http 调用更好? ?
这与嵌套的 http 调用无关,它与嵌套订阅有关,它是 RxJS 反模式。
RxJS 是一个以反应式和声明式方式解决问题的库。这意味着您在应用程序中的数据流应该被描述为流。 RxJS 中的良好模式假设整个流程应该写成一个延迟加载的流。在您的情况下,整个流程是:fetch person with id=1 -> determine homeworld -> fetch homeworld
。因此,您实际上并不介意个人详细信息,而是 homeworld
。
请注意,在第二种情况下,您不调用任何 http 方法,您只编写惰性流。它允许您就地使用此流或在不存储状态的情况下在另一个地方订阅它。这是一个巨大的优势,您无需关心状态或中间状态(命令式方法)。
此外,当您使用 .subscribe()
时,您创建的订阅应在 service/component 生命周期中进行管理。如果您创建一个流,则只创建一个订阅,因此订阅管理更容易。
我知道,http.get/post observable 在获取数据后完成,但是如果您将组件留在进行 http 调用的地方怎么办?代码将在不存在的范围内执行 side-effects。
我认为您也可以在 https://medium.com/angular-in-depth/when-to-subscribe-a83332ae053
中找到很好的解释