如何在 http 拦截器 Angular 中处理/检测取消的请求？

Question

How do I handle cancelled requests in http interceptor? I have tried various methods from SO, but none of them seem to catch it.

This is how my interceptor is,

 public intercept(req: HttpRequest<any>, next: HttpHandler) { const xyz = this._cookieService.get('xyz'); const abc = this._cookieService.get('abc'); let authReq; if (jwt === "undefined" || jwt === undefined) { authReq = req.clone({ headers: req.headers.set('Authorization', xyz) }); } else { authReq = req.clone({setHeaders: { Authorization: 'bearer ' + abc } }); } return next .handle(authReq) .pipe( catchError((err: HttpErrorResponse) => this.catchErrorHandler(err)) ); }

I have tried the do , finalize methods as well. Its that, my auth expires, and all the requests after that just collapse one by one, and the page breaks. I would like to handle it with code, so that the page doesn't break. Methods I have tried: https://stackoverflow.com/a/50620910/6630504 https://stackoverflow.com/a/55756885/6630504

Answer 1

There is an RxJS operator called finalize .

Returns an Observable that mirrors the source Observable, but will call a specified function when the source terminates on complete or error. The specified function will also be called when the subscriber explicitly unsubscribes.

    return next
        .handle(authReq)
        .pipe(
            catchError((err: HttpErrorResponse) => this.catchErrorHandler(err)),
            finalize(() => console.log('finalize'))
        );

Answer 2

Try this interceptor:

@Injectable()
export class RequestInterception implements HttpInterceptor {
  public constructor() { }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const token = '';
    const currentLanguage = 'en';
    let headers;

    if (token) {
      headers = new HttpHeaders({
        "X-MDM-Token": token,
        "Accept-Language": currentLanguage
      });
    }

    request = request.clone({
      headers: headers,
      url: request.url || environment.serverUrl
    });

    return next.handle(request).pipe(
      map((event: any) => {

        if (event.status < 200 || event.status >= 300) {
          return Observable.throw(event);
        }

        return event;
      }),

      catchError((response: HttpErrorResponse, request) => {
        switch (response.status) {
          case 401:
            //
            break;
        }
        return throwError("Ошибка сервера RequestInterception!");
      })
    );
  }
}

If client canceled http request you will get 499 http code, it will be caught by:

if (event.status < 200 || event.status >= 300) {
      return Observable.throw(event);
}