Как удерживать http-запрос без сбоев до получения ответа Angular

Question

Это мой http API запрос this.dashboardServiceHandler.getTxnInfo([], params). API возвращает ответ примерно через 2 минуты. Здесь я пытаюсь удерживать свой запрос до получения ответа. Но на вкладке сети он показывает ожидающие в течение длительного времени, и это не удается. Как я могу держать мою просьбу, пока не придет ответ.

delayForFiveSeconds = () => timer(135000);

getBookingInfo(dateType: string) {
  const delayForFiveSeconds = () => timer(135000);
  const params = [];

  params.push({code: 'dateType', name: dateType});
  params.push({code: 'from', name: '2019-01-01'});
  params.push({code: 'to', name: '2019-01-31'});

  // this.timeout(4000);
  return  this.ServiceHandler.getTxnInfo([], params);
}

В этом классе я вызываю бэкэнд-API.

export class ServiceHandler {
    getTxnInfo(headers: any[], params: any[]) {
    return this.apiService.get(environment.rm_url + 'rm-analytics-api/dashboard/txn-info', headers, params);
  }
}

getBookingDetails() {
  this.delayForFiveSeconds().subscribe(() => {this.getBookingInfo('BOOKING').subscribe(
    bookings => {
      console.log(bookings);
    });
  });
}

Answer 1

Rx JS имеет оператор тайм-аута. Вероятно, вы можете использовать это, чтобы увеличить время ожидания

getBookingInfo(dateType: string) {
  ...
  return  this.ServiceHandler.getTxnInfo([], params).pipe(
    timeout(10*60*1000) // 10 minutes
  );
}

И затем вы можете обновить вызывающую функцию до

getBookingDetails() {
  this.getBookingInfo('BOOKING').subscribe(
    bookings => {
      console.log(bookings);
  });
}

Answer 2

Вы можете использовать оператор времени ожидания rxjs, включая его в pipe с timeout:

import { timeout, catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

...
getTxnInfo(headers: any[], params: any[]) {
  this.apiService.get(environment.rm_url + 'rm-analytics-api/dashboard/txn-info', headers, params)
   .pipe(
      timeout(20000),
      catchError(e => {
        return of(null);
      })
    );
}

Используя его:

  this.ServiceHandler.getTxnInfo([], params).subscribe(
    txnInfos => {
      console.log(txnInfos );
  });