可观测值变化的角度最佳实践

Question

在我们当前的项目中，我们使用Observable，如果值发生变化，我们必须进行其他api调用。例如这样的东西(authorizedModules$是可观测的(：

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和Promises。那么，处理这样的事情最好的方法是什么呢？

Answer 1

我认为没有必要将可观察性转换为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
}
});
}