Angular 5/HttpInterceptor/Detect(已取消)xhr

Question

在我的 Angular 应用程序中，我发现 chrome(取消)api 调用触发得太快。我还有一个 HttpInterceptor，如果请求未完成，它会在 500 毫秒后触发每个 HttpClient 请求的加载指示器。但是，对于获得(取消)的请求，似乎没有任何新事件随后隐藏我的加载指示器。

有没有办法检测 HttpInterceptor 中“已取消”的请求，以便我可以再次隐藏我的加载指示器？

  export class GlobalHttpInterceptor implements HttpInterceptor {
    constructor(
      private sessionService: SessionService,
      private loadingService: LoadingService
    ) { }

    intercept(
      req: HttpRequest<any>,
      next: HttpHandler
    ): Observable<HttpEvent<any>> {

      setTimeout(() => {
        if (showLoading) {
          this.loadingService.show();
        }
      }, 500);
      let showLoading = true;

      if (this.sessionService.headers.length > 0) {
        for (const x of this.sessionService.headers) {
          req = req.clone({
            headers: req.headers.set(x.key, x.value)
          });
        }
      }

      return next.handle(req)
        .do(
          (response) => {
            if (response instanceof HttpResponse) {
              showLoading = false;
              this.loadingService.hide();
            }
          },
          (error) => {
            showLoading = false;
            this.loadingService.hide();
          }
        );
    }
  }

Answer 1

刚遇到同样的问题。即使取消 http 请求，finalize 运算符似乎也会触发。

    public intercept(
        request: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        // request starts

        return next.handle(request).pipe(
            finalize(() => {
                // request completes, errors, or is cancelled
            })
        );
    }