如何在嵌套的 Observables 中返回 Observable？答案

【问题标题】：How to return an Observeble within nested Observables?如何在嵌套的 Observables 中返回 Observable？
【发布时间】：2023-03-23 06:50:02
【问题描述】：

我有两个嵌套的 observable，第一个 observable 提供了一个 ID，它作为参数传递给第二个 observable userTypeID。

目标是返回一个基于 actionType 的 Observable，它可以是 view 或 edit，以便执行此类操作。

// returns view object 
getPresentationFields('view').subscribe(data => console.log(data)); 

// returns edit object
getPresentationFields('edit').subscribe(data => console.log(data));

但是，由于我已经订阅了 getPresentationFields(...) 中的 Observables，所以我不能订阅上面写的函数本身。

getPresentationFields(actionType: string) {
    this.customerService.getUserByID(this.id).subscribe(user => {
        this.presConfigService.getPresConfig(user.userTypeID).pipe(
            flatMap((configs) => configs),          // ----[obj1, obj2, obj3]----
            filter((configs) => configs.show)      // ----obj1----obj2----obj3----
        ).subscribe(() => {
            if(actionType == 'view'){
                // Return View Observable
            }else if(actionType == 'edit'){
                // Return Edit Observable
            }
        });
    });
}

如何根据传递给 getPresentationFields('view') 或 getPresentationFields('edit') 的参数返回 Observable？

【问题讨论】：

标签： angular rxjs observer-pattern

【解决方案1】：

getPresentationFields代码不需要订阅，直接通过 Observable 即可。

粗略示例（不确定您需要返回配置的哪一部分以进行查看/编辑）

function getPresentationFields(actionType: string) {
  return this.customerService
    .getUserByID(this.id)
    .pipe(
      switchMap(user => this.presConfigService.getPresConfig(user.userTypeID)),
      flatMap((configs) => configs),
      filter((configs) => {
        if(actionType == 'view'){
          return configs.show;
        }else if(actionType == 'edit'){
          return configs.edit;
        }
      })
    )
}

或者你可以在更高的地方使用 if-else：

function getPresentationFields(actionType: string) {
  const result$ = this.customerService
    .getUserByID(this.id)
    .pipe(
      switchMap(user => this.presConfigService.getPresConfig(user.userTypeID))
    );

 if(actionType == 'view'){
    return result$.pipe(
      // ... get view data
    );
  } else if(actionType == 'edit'){
    return result$.pipe(
      // ... get edit data
    )
  }
}

通常，您只需要在消费结果的地方订阅 Observable。

您甚至可能没有真正订阅您的代码，而是将 observable 传递给外部某处，例如 angular | async 或 redux effects！

因此，大多数情况下，您将使用 switchMap、mergeMap、combineLatest 等运算符来处理您的数据并将其传递给订阅，这将尽可能地精简。

【讨论】：