Угловой 5 - спиннер HttpInterceptor иногда занимает много времени, чтобы исчезнуть после завершения всех запросов - PullRequest
Новая
       29

Угловой 5 - спиннер HttpInterceptor иногда занимает много времени, чтобы исчезнуть после завершения всех запросов

0 голосов
/ 15 октября 2018

Недавно я реализовал спиннер, который отображает, когда происходит http-запрос, и иногда он продолжает отображаться, даже если все запросы выполнены.Когда это происходит, пользовательский интерфейс полностью блокируется, потому что наш вращающийся пользовательский интерфейс отображается на всей странице.Когда я обновляю счетчик отображается и быстро исчезает (возможно, из-за кэшированных запросов).

В любом случае, вот мой код: 

  import { Router } from '@angular/router';
import { Injectable, ApplicationRef } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/empty';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { ErrorHandlingService } from '../../service/error-handling.service';

@Injectable()
export class ApiRequestInterceptor implements HttpInterceptor {

  private count = 0;

  constructor(
    private readonly spinner: Ng4LoadingSpinnerService,
    private readonly router: Router,
    private readonly errorHandling: ErrorHandlingService,
    private readonly applicationRef: ApplicationRef) { }

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

    if (this.count === 1) {
      this.spinner.show();
    }

    const handleObs = next.handle(req);

    handleObs
      .catch((err: any) => {
        this.count--;
        return Observable.throw(err);
      })
      .do(event => {
        if (event instanceof HttpResponse) {
          this.count--;
          if (this.count === 0) {
            this.spinner.hide();
          }
        }
      }).finally(() => {

        this.applicationRef.tick();
      });


    return handleObs;
  }
}

Кто-нибудь видит в моем коде что-нибудь, что могло бы вызвать эту проблему?Я посмотрел другой пример кода и не вижу, что вызывает мою проблему.

1 Ответ

0 голосов
/ 15 октября 2018

Поскольку это происходит внутри do(), оно, вероятно, не перехватывается Angular и обнаруживается только в следующем цикле обнаружения изменений.

Вы можете просто обернуть вызов с помощью setTimeout(), потому что он был исправленУгловой или использовать NgZone.run: 

.do(event => {
  if (event instanceof HttpResponse) {
    this.count--;
    if (this.count === 0) setTimeout(() => this.spinner.hide());
  }
})
...