Angular语言 - 在异步调用后端后调用过程的正确方法

Question

>我在异步调用后端 API 后执行过程时遇到了一些情况

this.includedServicesList.forEach(x =>
this.ccApi.getServicePrice(x.ServiceCode, '0', 'NONE')
.subscribe(data => {
x.ServicePrice = data.MPrice;
this.includedServicesPrice += data.MPrice;
//this.calculatePrices();
})
);
//this.calculatePrices();

对于数组的每个元素，我需要调用后端 api(从数据库中获取一些数据(。

完成后，我想调用计算价格程序来更新数据。如果我在 forEach 循环之后放置过程调用，它甚至在收集数据之前就被执行了。 如果我把它放在订阅块中，它会为数组中的每个元素调用一次(并且在整个循环完成后我只需要调用它一次(

有没有解决这个问题的好方法(无需设置随机超时并希望所有异步调用都将在那个点或类似的事情之前完成(

提前谢谢你

Answer 1

您可以利用 zip 运算符。

在所有可观察量发出后，以数组形式发出值

import { zip } from 'rxjs';
zip(
this.includedServicesList.map(x =>
this.ccApi.getServicePrice(x.ServiceCode, '0', 'NONE')
.pipe(tap(data => {
x.ServicePrice = data.MPrice;
this.includedServicesPrice += data.MPrice;
}))
)
).subscribe(()=>this.calculatePrices())

零件

data => {
x.ServicePrice = data.MPrice;
this.includedServicesPrice += data.MPrice;
}

将在收到每个回复后调用。 收到所有答复后，将调用calculatePrices。

Answer 2

我不知道这是否有效，因为我看不到您的后端调用，但也许您可以为您的服务函数提供一个元素，而不是一个元素，而是整个数组。然后，您的服务函数处理整个数组并返回价格数组，因此您只需进行一次调用，而不必等待所有其他调用。我希望你明白我的意思。如果没有，请告诉我！