如何保持 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);
}

在這個 class 中，我調用后端 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

RxJS 有一個超時操作符。 可能您可以使用它來增加超時

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

然后您可以將調用 function 更新為

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

Answer 2

您可以使用rxjs的timeout運算符，包括在pipe時：

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