如何在Array.prototype.map中使用wait来等待RxJS Observables

Question

如何在getFooBar返回可观察结果的映射函数内等待结果？

Ex代码：

this.fooBarResponse.fooBars.map(async (x) => {
x.fooBar = await this.fooBarService
.getFooBar(x.fooBarId.toString())
.toPromise();
return x;
});

foobar.service.ts

getFooBar(id: string): Observable<FooBar> {
return this.fooBarsCollection.doc<FooBar>(id).valueChanges();
}

Answer 1

Array#map是同步的。请改用for...of循环。

for(const x of this.fooBarResponse.fooBars){
x.fooBar = await this.fooBarService
.getFooBar(x.fooBarId.toString())
.pipe(take(1))
.toPromise();
}

Answer 2

将fooBars数组减少为一个可观察的数组，将Map从一个切换到下一个

const { of } = rxjs;
const { switchMap, delay } = rxjs.operators;
const fooBarResponse = {
fooBars: [{ fooBarId: 1 }, { fooBarId: 2 }, { fooBarId: 3 }, { fooBarId: 4 }, { fooBarId: 5 }, { fooBarId: 6 } ,{ fooBarId: 7 } , { fooBarId: 8 }]
}
const fooBarService = {
getFooBar: x => of(`emitted ${x}`).pipe(delay(500))
};
fooBarResponse.fooBars.reduce(
(obs$, x) => obs$.pipe(
switchMap(_ => {
console.log(`Switching from foobar ${x.fooBarId}`);
return fooBarService.getFooBar(x.fooBarId.toString());
})
),
of(null) // start with some random observable
).subscribe(finalEmit => {
console.log(finalEmit);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.min.js"></script>