How to use Angular Http Interceptors to handle request Time out in Angular

Question

My get request of one BACKEND API i am calling is getting more than 2 minutes.And i am trying to handle this using Angular Http Interceptors.When i added "timeout": 360000 in proxy.config my problem solved to some extent.But still sometimes it fails. This is my Interceptor class.

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

}

Since it fails i am trying to send headers in the call.But it does n't allow.

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

And i added this to dashboard.module.ts

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

And I added this to proxy.config as well.

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

How could i solve this problem?

You want to limit request time manually or you want to handle server timeout error no matter how long the waiting time is? — leonmain, May 21 '20 at 07:27
I want to get the response from api no matter how long it get — Hans, May 21 '20 at 08:07

score 0 · Answer 1 · answered May 21 '20 at 11:05

It worked when i added this to app.module.ts file. And able to hold the request without failing until the response comes.

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

And i did n't wanted to add new HttpHeaders({ timeout:${360000}}) in headers.

score -1 · Answer 2 · answered May 21 '20 at 06:50

-1

The HttpInterceptor is the wrong place to handle it. Try using Ngrx Effects instead

answered May 21 '20 at 06:50

malc

148
1
9

How to use Angular Http Interceptors to handle request Time out in Angular

2 Answers2