具有可观察值更改的 Angular 最佳实践答案

【问题标题】：Angular best practice with Observable Value changes具有可观察值更改的 Angular 最佳实践
【发布时间】：2021-07-05 02:41:48
【问题描述】：

在我们当前的项目中，我们使用 Observable，如果值发生变化，我们必须进行其他 api 调用。例如这样的事情（authorizedModules$ 是一个 Observable）：

ngOnInit(): void {
    this.authorizedModules$
      .pipe(
        takeUntil(this.onDestroy$),
        switchMap(async () => this.load())
      ).subscribe();
}

async load(): Promise<void> {
    const foo: boolean = await this.fooService.isFoo().toPromise();
    
    if (!foo) {
      return;
    }
    
    const fooA: Foo[] = await this.authorizedModules$.pipe(take(1)).toPromise();
    
    if (!fooA || fooA.length === 0) {
      return;
    }
    
    this.fooB = await this.fooService.getFoo(fooA);
    ....  
}

我不确定这是反模式还是至少是一个好的解决方案，因为我们混合了 Observables 和 Promise。那么处理这种情况的最佳方法是什么？

【问题讨论】：

标签： angular async-await rxjs observable

【解决方案1】：

我想说没有必要将 observables 转换为 Promise。您可以使用更高阶的映射运算符（如concatMap）从一个可观察对象映射到另一个对象，并仅在满足特定条件时才使用filter 运算符。

试试下面的

ngOnInit(): void {
  this.authorizedModules$.pipe(
    concatMap(() => this.fooService.isFoo()),
    filter(foo => !!foo),
    concatMap(() => this.authorizedModules$.pipe(take(1))),
    filter(fooA => !!fooA && fooA.length != 0),
    concatMap(fooA => this.fooService.getFoo(fooA)),
    takeUntil(this.onDestroy$),
  ).subscribe({
    next: (res: any) => {
      // handle response
    },
    error: (error: any) => {
      // handle error
    }
  });
}

【讨论】：