订阅内部订阅:如何在单次订阅中等待两者完成
订阅内部订阅:如何在单次订阅中等待两者完成
提问于 2022-07-05 13:49:06
我是RXJS的新手，我有一件事是我想要实现的，但我不知道如何实现。
我有两个API调用。但第二个问题取决于第一个问题的价值。问题是我想用一个订阅来处理两个调用，所以当两个订阅都完成时，finished触发器就会触发。下面是我现在所做的工作，在第一个可观察到的结束之后，finishes触发器不再等待第二个触发器。
private getTemplate(){
this.loading = true;
this.service.getTemplate()
.pipe(
finalize(() => this.loading = false)
)
.subscribe(
(response) => {
if (response) {
this.createImage(response.link);
}
}
)}
public createImage(link: string) {
this.service.createImage(link)
.subscribe(
(response) => {
this.image = response;
}
)回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-05 13:55:41
我会用switchMap来处理它
private getTemplate(){
this.loading = true
this.a2vService.getNetworkTemplate().pipe(
filter(response => !!response),
switchMap(response => this.createImage(response.link)),
finalize(() => this.loading = false)
).subscribe()
}
public createImage(link: string) {
return this.service.createImage(link).pipe(
tap(response => {
this.image = response
})
)
)switchMap将执行在发出的第一个可观察到的第二个。由于这两个可观测值都位于单个pipe()中，所以您也可以将finalize()放在这里，这将在第二个可观测到的finalize()发出时触发。
从createImage返回可观测值也很重要，这样它就可以在pipe()内部使用。
如您所见，上面的.subscribe()是空的。我们可以把最后的东西放在这里，它的行为应该是一样的。
private getTemplate(){
this.loading = true
this.a2vService.getNetworkTemplate().pipe(
filter(response => !!response),
switchMap(response => this.createImage(response.link))
).subscribe(() => {
this.loading = false
})
}如何将数据从getNetworkTemplate传递给subscribe()回调：
private getTemplate(){
this.loading = true
this.a2vService.getNetworkTemplate().pipe(
filter(response => !!response),
switchMap(response =>
combineLatest([of(response), this.createImage(response.link)])
)
).subscribe(([networkTemplateResponse, createImageResponse]) => {
this.loading = false
})
}Stack Overflow用户
发布于 2022-07-05 14:10:36
您可以根据第一个流的结果使用switchMap订阅第二个流。您可以使用筛选器来确保只有当第一个响应通过(if (response))时才会转移到第二个响应。
你可以这样写：
private getTemplate() {
this.loading = true;
this.a2vService.getNetworkTemplate().pipe(
filter(response => !!response),
switchMap(resp => this.service.createImage(resp.link)),
finalize(() => this.loading = false)
).subscribe(resp => this.image = resp);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72870573
复制相关文章
相似问题
腾讯云开发者
