Как перезагрузить страницу в Angular Typescript для "ожидания" HTTP-вызовов с помощью BE

#angular #typescript #asynchronous #async-await #subscribe

#angular #typescript #асинхронный #async-await #Подписка

Вопрос:

В приведенном ниже коде:

http-вызов получает идентификаторы нескольких строк заказа (элементов)
для каждого из них выполняется другой 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);

Ответ №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