Angular intercept — как сделать что-то, при abort запроса из вне?

Question

[waltaki]

Здравствуйте.

У меня есть intercept, который при появление запроса делает анимацию загрузки на странице.
Но, проблема в том, что когда например, на самой странице происходит ngOnDestroy, и происходит отписка от запроса, он отменяется (происходит вызов abort запроса), в результате чего, теперь я и не узнаю в intercept, что с этим запросом, то есть, я и не завершаю анимацию, и она так будет до бесконечности.

// component
private getUsersSubscription: Subscription;
ngOnInit() {
  this.getUsersSubscription = this.gsService.getUsers().subscribe(response => {
    // бла бла бла
  });
}

ngOnDestroy() {
  if(this.getUsersSubscription) this.getUsersSubscription.unsubscribe();
}

// intercept
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
	
  this.visoad.startLoading();
	
  return next.handle(req).pipe(
    map((event: HttpEvent<any>) => {
			
      this.visoad.completeLoading();
			
      return event;
    }),
    catchError((err: any, caught) => {
      if (err instanceof HttpErrorResponse) {
				
        this.visoad.completeLoading();
				
        return observableThrowError(err);
      }
    })
  );
}

Answer 1

[Антон Швец]

Странно, вы должны завершать анимацию сразу по совершению запроса. потому что сначала в map попадет HttpEvent со статусом Sent, он будет всегда независимо от получения ответа.

А так вот что удалось придумать https://stackblitz.com/edit/angular-m3quu3?file=sr...
не совсем изящно, но работает, видно какие запросы были отменены, а какие успешны.

Ну и следует просто завершать анимацию в finalize, независимо от статуса.
Кстати что будет, если запросов одновременно будет несколько?

Comments

[waltaki]

Спасибо! Это то, что нужно.

Насчет нескольких загрузок требующих анимацию:

import { Injectable } from "@angular/core";

@Injectable()
export class Visoad {
  private status = false;
  private count = 0;

  getStatus() {
    return this.status;
  }

  startLoading() {
    if(!this.status) this.status = true;
    this.count++;
  }

  completeLoading() {
    this.count--;
    if(this.status && !this.count) this.status = false;
  }
}

У меня загрузка отображается в одном месте

[Антон Швец]

waltaki,

@Injectable()
export class Visoad {
  private count = new BehaviorSubject(0);
  private status = this.status.pipe(map(Boolean));

  getStatus() {
    return this.status;
  }

  startLoading() {
    this.count.next(this.count.value + 1);
  }

  completeLoading() {
    this.count.next(this.count.value  - 1);
  }
}