如何在RXJS中等待多个HTTP调用完成?

Question

在这个演示程序中，我们有以下结构:

• 文章列表(当页面加载时加载)
• 每一篇文章都有一个名为detail的嵌套对象，延迟加载

点击一个条目将加载它的详细信息。

但我面临的问题是导出按钮(在本例中是模拟的)。初始导出不包含文章的详细信息。如果我在几秒钟后再次导出，详细信息也包括在内。

article服务中的延迟模拟了http调用中的一些延迟。解决这个问题的正确方法是什么?我知道这是工作时添加一些延迟()，但我不喜欢这个解决方案。

https://stackblitz.com/edit/angular-ivy-riqbsz?file=src%2Findex.html

Answer 1

您想使用RxJs中的CombineLatest

https://stackblitz.com/edit/angular-ivy-nmpzez?file=src/app/app.component.ts

注意:我还改变了LoadDetailsArticle返回一个可观察对象。

你需要创建一个可观察对象数组，并将其传递给combinellatest函数。一旦所有的可观察对象都返回了它们的最新值，就会被用来返回订阅。

simulateExport() {
// create empty array to pass to combineLatest
let loadDetailsForArticlesArray = [];
this.articleService.articles$.subscribe(articles => {
articles.forEach(article => {
//push each observable to array
loadDetailsForArticlesArray.push(
this.articleService.loadDetailsForArticle(article)
);
});
});
// wait for all observables to resolve.
combineLatest(loadDetailsForArticlesArray).subscribe(res => {
this.allArticleDetailsLoaded.next(true);
});
}

Answer 2

在您请求获取详细信息后，*ngIf="(allArticleDetailsLoaded$ | async)"有条件地加载您的文章。如果您想确保在下载之前文章中包含详细信息，您可以简单地隐藏或禁用导出按钮，直到详细信息被加载，即allArticleDetailsLoaded$行为主题发出true。

你有什么

<button *ngIf="(articleService.articles$ | async)" (click)="simulateExport()">
Export Articles into file
</button>

你应该有什么

<button *ngIf="(allArticleDetailsLoaded$ | async)" (click)="simulateExport()">
Export Articles into file
</button>