如何使用 BE 将 Angular Typescript 中的页面重新加载到 'await' HTTP 调用

Question

在下面的代码中：

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);

Answer 1

您可以使用 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

如何使用 BE 将 Angular Typescript 中的页面重新加载到 'await' HTTP 调用

How to reload page in Angular Typescript to 'await' HTTP calls with BE

angular

typescript

asynchronous

async-await

subscribe