延迟旋转器拦截器 Angular

Question

我为 http 请求制作了 spinner 拦截器。对于显示的每个 http 请求微调器。

但是有些网页请求速度比较快，这种情况下，spinner会变成网页中的闪烁。

我想为微调器做一些延迟，但我不知道怎么做。

微调组件

<ng-container *ngIf="loading$ | async">
<mat-progress-bar  mode="indeterminate" color='warn'>
</mat-progress-bar>

export class SpinnerComponent implements OnInit {
  loading$;

  constructor(private spinnerService: SpinnerService) { }

  ngOnInit() {
    this.loading$ = this.spinnerService.isLoading$
    .pipe(
     delay(0)
    );
  }

}

旋转器服务

export class SpinnerService {
isLoading$ = new Subject<boolean>();

show() {
    this.isLoading$.next(true);
}
hide() {
    this.isLoading$.next(false);
}

}

Spinner 拦截器

export class SpinnerInterceptor implements HttpInterceptor {
requestCount = 0;
constructor(private spinnerService: SpinnerService) { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requestCount++;
        this.spinnerService.show();

    return next.handle(request)
        .pipe(
            finalize(() => {
                this.requestCount--;
                if (this.requestCount === 0) {
                    this.spinnerService.hide();
                }
            })
        );
}

}

Answer 1

您可以在 hide() 函数中设置超时并在一段时间后执行代码这是一个例子

     hide() {
       setTimeout( () => {     
        this.isLoading$.next(false);
       }, 2000 );
     }

还有其他几种方法可以实现，参考

Answer 2

您可以先在管道内使用 debounceTime rxjs 运算符，然后再使用 finalize 方法。例如

    import { debounceTime } from 'rxjs/operators';

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requestCount++;
        this.spinnerService.show();

     return next.handle(request)
            .pipe(
                debounceTime(1000),
                finalize(() => {
                    this.requestCount--;
                    if (this.requestCount === 0) {
                        this.spinnerService.hide();
                    }
                })
            );

Answer 3

答案：https://codeburst.io/rxjs-show-spinner-for-a-minimum-amount-of-time-807ac6b23227

此外，要实现相反的效果（如果请求很快则根本不显示）请查看 race 运算符。

延迟旋转器拦截器 Angular

Delay spinner interceptor Angular

interceptor

rxjs

angular