angular - 如何在 Angular Typescript 中重新加载页面以使用 BE“等待”HTTP 调用
问题描述
在下面的代码中:
- http 调用获取多个订单行的(项目)ID
- 对于其中的每一个,都会进行另一个 http 调用并保留它们。然后我需要重做那些显示为保留的页面。
由于有很多项目,最后 3 行将在页面实际保留在 BE 中之前执行并重新加载页面,所以我添加了 0.7 秒的延迟,但这不是最佳实践,我不知道该怎么做(switchMap?如何)
this.service.getOrderlineId(this.orderlineIds).subscribe((ids: Number[]) => {
ids.forEach(id => {
this.currentReservation = {
orderline: id,
company: this.currentUser.company_id,
company_name: this.currentCompany.name,
user: this.currentUser.user_id,
delivery_address: this.currentCompany.address
}
this.service.createOrderLineReservation(this.currentReservation).subscribe(reservation => {
})
})
})
setTimeout(() => {
this.clearGroups();
this.prepareRow();
this.prepareGroups();
}, 700);
解决方案
您可以使用 Rxjs 的管道来操作流
this.service
.getOrderlineId(this.orderlineIds)
.pipe(
map((ids: number[]) =>
// Map the ids to an Observable list
ids.map((id) =>
this.service.createOrderLineReservation({
orderline: id,
company: this.currentUser.company_id,
company_name: this.currentCompany.name,
user: this.currentUser.user_id,
delivery_address: this.currentCompany.address,
})
)
),
switchMap((reservations$: Observable[]) =>
// After all observables emit, emit values as an array
zip(...reservations$))
)
.subscribe((reservations: Reservation[]) => {
// You get an ordered list of reservations
this.clearGroups();
this.prepareRow();
this.prepareGroups();
});
ps:不要使用setTimout
推荐阅读
- r - R:as_tbl_time 错误:指定的“索引”不是基于时间的
- php - php错误“语法错误意外'public'(t_public)期望文件结束”
- sql - 删除行包含部分日期类型类型字符串
- excel - 我可以制作组合框来过滤第二个组合框的范围吗?
- symfony - 在 symfony 4 中部署期间获取所有独白文件路径
- python-3.x - GeoPandas dataFrame using iterrows() to fill a dictionary with column data
- swift - Reflection in Swift
- mysql - how to display two queries in one mysql table
- php - json_decode getting JSON_ERROR_SYNTAX on POST request
- spring-kafka - @EventListener 中的 SPEL 表达式