仅针对使用 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 秒后显示微调器。

如果请求完成 < 1s 你将永远不会看到它，否则它会在显示时被隐藏。

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 秒的请求并为它们处理特定的微调器

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

Show spinner only for long time requests with Angular HttpInterceptor

spinner

interceptor

angular