使用 Angular HttpInterceptor 仅针对长时间请求显示微调器

Question

我创建了一个拦截器来在发出 HTTP 请求时显示旋转器：

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { Observable } from 'rxjs/Observable';
import { finalize } from 'rxjs/operators';

@Injectable()
export class SpinnerInterceptor implements HttpInterceptor {

  constructor(
    private spinner: NgxSpinnerService
  ) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.spinner.show();

    return next.handle(req).pipe(finalize(() => this.spinner.hide()));
  }

}

我正在使用ngx-spinner来达到这个目的。

例如，我只想仅针对耗时超过 1 秒的 HTTP 请求显示微调器。我一直在尝试使用debounceTime但我不确定如何使用它或者它是否适合我想要的。

有没有办法使用拦截器来做到这一点？

更新：我在打开问题后找到了解决方案，它与@joyBlanks 答案非常相似，这就是我所做的：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  let finished = false;

  setTimeout(() => {
    if (!finished) {
      this.spinner.show();
    }
  }, 1000);

  return next.handle(req).pipe(finalize(() => {
    finished = true;
    this.spinner.hide();
  }));
}

Answer 1

设置计时器以在 1 秒后显示微调器。

如果请求完成 < 1 秒，您将永远不会看到它，否则即使显示它也会被隐藏。

timer: NodeJS.Timeout;
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  if(this.timer){
    clearTimeout(this.timer);
  }
  this.timer = setTimeout(() => this.spinner.show(), 1000);

  return next.handle(req).pipe(finalize(() => {
    this.spinner.hide();
    if(this.timer){
      clearTimeout(this.timer);
    }
  }));
}