javascript - 如何以非阻塞方式组合可观察对象？

Question

我有一个 Observable 集合，每个 Observable 可以检索不同的数据类型。我正在链接那些 Observable 以获得我想要的页面的所有数据。 事实上，所有这些信息都是独立的，因此加载一个信息不应阻塞或干扰其他信息的加载。这是我无法实现的。

这是我目前所做的示例:

  getAll(): Observable<any[]> {
    return this.getHome().pipe(
      tap((home: Home) => this.application = home),
      mergeMap((home: Home) =>
        combineLatest([
          this.getAssets(home.images).pipe(defaultIfEmpty([])),
          this.getStyling(home.styling).pipe(defaultIfEmpty({})),
          this.getCategories(home.categories).pipe(defaultIfEmpty([])),
        ])
      )
    );
  }

在这里，Observable 被成功链接，所以我得到了我想要的所有数据，但是 combineLatest() 在上一个请求完成后执行下一个请求，并且父级在一切完成后发出收集的数据这会造成延迟。 我一直在尝试使用 merge() 而不是 combineLatest() 以便收到的每个数据立即将其发送到父 Observable，但显然我做不到那个

那么，我如何设法链接这些 Observable，以便子 Observable 中的每个提交都直接发送到父 Observable？

Answer 1

你需要forkJoin , 它返回一个 Array每个Observable的结果(与 forkJoin 参数的顺序相同。

  getAll(): Observable<any[]> {
    return this.getHome().pipe(
      tap((home: Home) => this.application = home),
      mergeMap((home: Home) =>
        forkJoin(
          this.getAssets(home.images).pipe(defaultIfEmpty([])),
          this.getStyling(home.styling).pipe(defaultIfEmpty({})),
          this.getCategories(home.categories).pipe(defaultIfEmpty([]))
        )
      )
    );
  }