仅对具有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);
    }
  }));
}

Answer 2

正如@jonsharpe所说，你不能知道哪个请求会超过1秒(可能取决于用户的连接速度)，除非你有一些大任务，比如读取大文件，执行长cpu任务等。

如果你想在1秒挂起的请求后显示一个旋转器，继续使用@joyBlanks的答案，否则你将不得不确定那些实际花费超过1秒的请求来处理它们的特定旋转器