Задержка спиннера-перехватчика Angular - PullRequest
Новая
       30

Задержка спиннера-перехватчика Angular

1 голос
/ 08 февраля 2020

Я сделал перехватчик для запроса http. Для каждого http-запроса показывается счетчик.

Но некоторые веб-запросы выполняются относительно быстро, в этом случае счетчик станет мерцанием на веб-странице.

Я хочу сделать некоторую задержку для прядильщик, но я понятия не имею, как.

Компонент прядильщика 

<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();
                }
            })
        );
}

}

Ответы [ 3 ]

1 голос
/ 08 февраля 2020

Вы можете использовать оператор debounceTime rx js внутри канала первым после использования метода 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();
                    }
                })
            );
1 голос
/ 08 февраля 2020

Вы можете установить тайм-аут и выполнить код через некоторое время в вашей функции hide(). Вот пример 

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

Есть несколько других способов для достижения этой цели, см. этот ответ

0 голосов
/ 08 февраля 2020

ответ: https://codeburst.io/rxjs-show-spinner-for-a-minimum-amount-of-time-807ac6b23227

Кроме того, для достижения обратного (не показывать вообще, если запрос быстрый) взгляните на оператора race .

...