Question

我正在学习Angular，遇到了我喜欢但仍然不完全了解的Observable。所以我有一个Observable，它需要完成一个Observable才能继续。

我有一些序列问题，因为它们是独立的，因此我需要嵌套它们，以确保第二个Observable等待第一个的完成。我想知道是否有更好的方法来完成我的工作，因为似乎有些混乱。我可能需要在此结构中添加另一个嵌套的可观察对象。

这是我的代码示例...

    this.permissionService.build().subscribe( p =>{
        this.Headers = p; 
        this.accessService.buildTitlesWithMenus().subscribe( q => {
          this.treeNodes = this.accessService.buildTreeTable(q); 
        });                 
    });

Answer 1

this.permissionService.build().pipe(
  tap(p => this.Headers = p),
  switchMap(p => this.accessService.buildTitlesWithMenus()),
).subscribe(q => this.treeNodes = this.accessService.buildTreeTable(q));

这是正确的方法。

如果您有任何疑问，请随时提问！

Answer 2

这是正常的方式。而您则使一切正确。但是，如果要结构化代码。并使其更具可读性，您可以使用以下几种方法：

使用rxjs的{{3}}方法

接受ObservableInput的数组或的字典对象 ObservableInput并返回一个发出数组的Observable 值与传递的数组或字典的顺序完全相同与传递的字典具有相同形状的值。

private buildPermissionService() {
    return this.permissionService.build();
}

private buildTitlesWithMenus() {
    return this.accessService.buildTitlesWithMenus();
}

private buildMenuAndPermissions() {
    return forkJoin(
        this.buildPermissionService(),
        this.buildTitlesWithMenus()).subscribe(result => {
        this.Headers = result[0];
        this.treeNodes = this.accessService.buildTreeTable(result[1]);
    });
}

使用rxjs的{{3}}方法

将每个源值投影到一个Observable中，该值将合并到输出可观察到的，仅发出最近的值预计可观察。

this.permissionService.build().pipe(
  tap(p => this.Headers = p),
  switchMap(p => this.accessService.buildTitlesWithMenus()),
).subscribe(q => this.treeNodes = this.accessService.buildTreeTable(q));

您可以在文档中找到更多方法。例如，如果您不仅需要获得结果，而且还需要将其组合起来，则可以使用forkJoin或switchMap。

重构混乱的订阅以便进一步订阅

2 个答案: