angular - 我在嵌套两个服务时遇到问题
问题描述
第一个返回一个对象数组。每个对象都有一个唯一的用户 ID,我需要它来调用第二个服务。
this._vendorService.getAllPickupLoc().subscribe(val => {
val.forEach(element => {
this.finalObject = element;
this._vendorService.getVendorUserInfo(element.id).subscribe(res => {
this.finalObject["userInfo"] = res;
this.finalArray.push(this.finalObject);
});
});
});
虽然它工作正常,但上面的代码有两个缺点。1. 它开始看起来像回调地狱。2.我必须自己处理每个订阅的处置。
解决方案
您可以使用 RxJS 运算符将它们链接在一起:
this._vendorService.getAllPickupLoc().pipe(
// emit each element in order
mergeMap(elements => from(elements)),
// subscribe to inner Observable for each element and emit result
mergeMap(element => this._vendorService.getVendorUserInfo(element.id)),
// handle info
tap(userInfo => {
this.finalObject["userInfo"] = res;
this.finalArray.push(this.finalObject);
})
).subscribe();
根据其余代码的结构,您甚至可以摆脱tap
和简单地map
每次发射并添加toArray
以将最终结果作为数组发射。