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

【问题标题】：How to handle/detect canceled requests in http interceptor Angular?如何在http拦截器Angular中处理/检测取消的请求？
【发布时间】：2020-01-05 21:22:55
【问题描述】：

如何在 http 拦截器中处理取消的请求？我尝试了 SO 的各种方法，但似乎没有一个能抓住它。

这就是我的拦截器的样子，

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

我也尝试过do、finalize 方法。就是这样，我的授权过期了，之后的所有请求都一一崩溃，分页。我想用代码处理它，这样页面就不会中断。我尝试过的方法： https://stackoverflow.com/a/50620910/6630504 https://stackoverflow.com/a/55756885/6630504

【问题讨论】：

请准确分享您如何在代码中取消请求。另外，请分享您如何处理服务中的错误，而这个失败的 HttpClient 会导致问题。
我不是故意取消代码。在我的情况下，如果身份验证过期，浏览器会取消代码。
您确定为什么请求被取消了吗？如果没有工作示例或复制此问题的流程，则很难帮助解决此问题。
我也有类似的问题。我有计数器来计算同时显示等待屏幕的呼叫。现在，当呼叫被取消时，微调器会一直显示，因为一个呼叫已经开始但永无结束。或者看起来像这样。你的问题解决了吗？
在 Angular 11.2 github.com/angular/angular/issues/22324中有修复

标签： javascript angular typescript angular-http-interceptors

【解决方案1】：

有一个 RxJS 操作符叫做finalize。

返回一个镜像源 Observable 的 Observable，但会当源在完成时终止或调用指定的函数错误。订阅者时也会调用指定的函数明确取消订阅。

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

【讨论】：

【解决方案2】：

试试这个拦截器：

@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!");
      })
    );
  }
}

如果客户端取消了http请求，你会得到499 http代码，它会被：

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

【讨论】：

感谢您的回答。但这并没有捕捉到其中的请求。由于已取消，因此没有状态码。