如何使用 RXJS 在 Angular 中等待多个 HTTP 调用完成？

Question

在这个演示应用程序中，我们具有以下结构：

• 文章列表（页面加载时加载）
• 每篇文章都有一个嵌套的object调用detail，懒加载

单击文章项可加载其详细信息。

但我面临的问题是导出按钮（在这种情况下模拟）。 初始导出不包含文章详细信息。 如果我在几秒钟后再次导出，也会包含详细信息。

文章服务中的延迟模拟了 http 调用中的一些延迟。 解决这个问题的正确方法是什么？ 我知道添加一些延迟（）时这是有效的，但我不喜欢这个解决方案。

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

Answer 1

*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>

Answer 2

您想使用来自CombineLatest的 CombineLatest

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

注意：我还更改了 LoadDetailsArticle 以返回一个 observable。

您需要创建一个 observables 数组并将其传递给 combineLatest function。 一旦所有的 observables 返回它们的最新值，它们将被用于返回订阅。

  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);
    });
  }