如何使用 Angular Http 拦截器来处理 Angular 中的请求超时答案

【问题标题】：How to use Angular Http Interceptors to handle request Time out in Angular如何使用 Angular Http 拦截器来处理 Angular 中的请求超时
【发布时间】：2020-09-07 17:50:07
【问题描述】：

我正在调用的一个 BACKEND API 的获取请求已超过 2 分钟。我正在尝试使用 Angular Http 拦截器来处理这个问题。当我在 proxy.config 中添加 "timeout": 360000 时，我的问题在一定程度上解决了。但是有时它仍然会失败。这是我的拦截器类。

export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');
@Injectable()
export class DashboardInterceptor implements HttpInterceptor {
  constructor(@Inject(DEFAULT_TIMEOUT) protected defaultTimeout: number) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const timeoutValue = req.headers.get('timeout') || this.defaultTimeout;
    const timeoutValueNumeric = Number(timeoutValue);

    return next.handle(req).pipe(timeout(timeoutValueNumeric));
  }

}

由于失败，我试图在通话中发送标头。但它不允许。

getInfo(headers: new HttpHeaders({ timeout: `${360000}` }), params: any[]) {
    return this.apiService.get(environment.rm_url + 'rm-analytics-api/dashboard/txn-info', headers, params).pipe(
      timeout(360000),
      catchError(error => {
          console.log('Response error!');
          return of({ error});
        }
      ));
  }

我将它添加到dashboard.module.ts

providers:[ [DashboardServiceHandler, [{ provide: HTTP_INTERCEPTORS, useClass: DashboardInterceptor, multi: true }],
    [{ provide: DEFAULT_TIMEOUT, useValue: 360000 }]]

我也将它添加到 proxy.config 中。

"secure": false,
    "timeout": 360000,

我该如何解决这个问题？

【问题讨论】：

你想手动限制请求时间，还是不管等待多长时间都想处理服务器超时错误？
不管多长时间我都想得到api的响应

标签： angular angular-http-interceptors get-request request-timed-out

【解决方案1】：

HttpInterceptor 是错误的地方来处理它。尝试改用 Ngrx Effects

【讨论】：

【解决方案2】：

当我将它添加到 app.module.ts 文件时它起作用了。并且能够在响应到来之前保持请求而不会失败。

providers: [
    [{ provide: HTTP_INTERCEPTORS, useClass: DashboardInterceptor, multi: true }],
    [{ provide: DEFAULT_TIMEOUT, useValue: 360000 }]
  ],

我不想在标题中添加new HttpHeaders({ timeout:${360000}})。

【讨论】：