javascript - 重构链式 RxJs 订阅

Question

我有一段代码需要重构，因为它是链式订阅的 hell 。

ngOnInit(): void {
    this.dossierService.getIdTree()
        .subscribe(idTree => {
            this.bootstrappingService.refreshObligations(idTree)
                .subscribe(() => {
                    this.dossierPersonsService.retrieveDossierPersons(idTree)
                        .subscribe(debtors => {
                            this.retrieveObligations();
                            this.debtors = debtors;
                        });
                });
        });
}

1. 第一次调用 dossierService.getIdTree() 检索 idTree，它被除 obligationsService.retrieveObligations() 之外的其他服务使用。
2. 所有服务方法都应该按照它们现在执行的顺序执行。但是 retrieveDossierPersons 和 retrieveObligations 可以并行执行。
3. retrieveObligations() 是一种订阅另一个可观察对象的方法。此方法用于其他一些方法。

我重构了它，它似乎可以工作。但是我是否以适当的方式重构它或者我的代码可以改进？

   this.dossierService.getIdTree()
      .pipe(
        map(idTree => {
          this.idTree = idTree;
        }),
        switchMap(() => {
          return this.bootstrappingService.refreshObligations(this.idTree)
        }),
        switchMap(
          () => {
            return this.dossierPersonsService.retrieveDossierPersons(this.idTree)
          },
        )
      )
      .subscribe(debtors => {
        this.retrieveObligations();
        this.debtors = debtors;
      });

Answer 1

类似这样的东西(未检查语法):

  ngOnInit(): void {
    this.dossierService.getIdTree().pipe(
      switchMap(idTree =>
        this.bootstrappingService.refreshObligations(idTree)).pipe(
          switchMap(() => this.dossierPersonsService.retrieveDossierPersons(idTree).pipe(
            tap(debtors => this.debtors = debtors)
          )),
          switchMap(() => this.retrieveObligations())
        )
    ).subscribe();
  }

使用高阶映射运算符(在本例中为 switchMap)将确保订阅和取消订阅内部可观察对象。

在此示例中，您不需要单独存储 idTree，因为您可以通过链式管道访问它。