问题描述
我有一个嵌套的 Observable 情况,经过一些研究我发现最好使用 RxJS switchMap
。
就我而言,第一个 observable 包含 Promise
,因此我必须等待第一个订阅结果,然后才能将其传递给第二个 observable。现在第二个 Observable
没有被订阅,而是返回一个 Observable
而不是订阅它的结果。
firstObservable(x) {
return this.productService.getProduct(x).pipe(
map(async result => {
this.productObject = {...result};
let timeVariable = await
this.distanceMatrixService.getTime(this.productObject,this.currentLocation);
return this.productObject;
})
}
async secondobservable(passedProductObject) {
const productObject = await passedProductObject;
return this.productService.getProductsByShop(productObject.store_id).pipe(
map(result => {
////STUFF that depends on the timeVariable
}));
}
chainingObservables(x) {
return this.firstObservable(x).pipe(
switchMap(async x => this.secondobservable(x)));
}
this.chainingObservables(this.passedData).subscribe(res => {
console.log("result",res);
})
result Observable {_isScalar: false,source: Observable,operator: MapOperator}
任何建议将不胜感激。
解决方法
您可以使用像这样的 switchMap 运算符在管道链中执行此操作。
你不应该使用 observables 的异步
假设 this.distanceMatrixService.getTime 返回一个有效的 promise。
observable(x) {
return this.productService.getProduct(x).pipe(
tap(result => {
this.productObject = {...result};
}),switchMap(() => {
return from(this.distanceMatrixService.getTime(this.productObject,this.currentLocation))
.pipe(map((time) => [time,this.productObject]));
}),switchMap(([time,passedProductObject]) => {
return this.productService.getProductsByShop(passedProductObject.store_id).pipe(
map(result => {
////STUFF that depends on the timeVariable
return time;
}));
}));
}
subMethod(x) {
this.observable(this.passedData).subscribe(res => {
console.log('result',res);
});
}
,
您可以使用 RxJS from
函数将承诺转换为可观察的。之后,使用 switchMap
的几个 map
应该足以满足您的要求。
试试下面的方法
this.productService.getProduct(x).pipe(
map(result => ({...result})),switchMap(productObject =>
from(this.distanceMatrixService.getTime(productObject,this.currentLocation)).pipe(
map(timeVariable => ({
productObject: productObject,timeVariable: timeVariable
}))
)
),switchMap(({productObject,timeVariable}) =>
this.productService.getProductsByShop(productObject.store_id).pipe(
map(result => {
// stuff that depends on `timeVariable`
})
)
)
).subscribe(
res => {
console.log("result",res);
},error => {
// handle error
}
);