Как отключить индикатор загрузки в angular httpClient callback callback? - PullRequest
Новая
       4

Как отключить индикатор загрузки в angular httpClient callback callback?

0 голосов
/ 13 апреля 2020

Я использую индикатор загрузки во время загрузки данных и отключаю его после успешного завершения. Но если есть ошибка - мне нужно отключить ее в случае ошибки. В этом случае происходит дублирование. Есть ли способ выключить его один раз в конце? 

loading: boolean = true;

this.myService.getInfo(formData).subscribe(response => {
    ...success action
    this.loading = false;
}, error => {
    ...error action
    this.loading = false;
});

Спасибо!

Ответы [ 2 ]

2 голосов
/ 13 апреля 2020

U может использовать метод финализации. Пример ссылки ниже 

this.myService.getInfo(formData)
   .pipe( 
         finalize(() => {
              // Your code Here
         })
     )
.subscribe(response => {
    ...success action
    this.loading = false;
}, error => {
    ...error action
    this.loading = false;
});

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/finally.md

и проверьте здесь

Angular: как окончательно позвонить ( ) с RX JS 6

1 голос
/ 13 апреля 2020

вы можете реализовать перехватчик и сервис для отображения загрузчика. и этот сервис.

вот пример для показа загрузчика с использованием инерцептора. 

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, pipe } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor {
  constructor(private loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.showLoader();
    return next.handle(req).pipe(tap((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) {
        this.onEnd();
      }
    },
      (err: any) => {
        this.onEnd();
    }));
  }
  private onEnd(): void {
    this.hideLoader();
  }
  private showLoader(): void {
    this.loaderService.show();
  }
  private hideLoader(): void {
    this.loaderService.hide();
  }
}

сервис загрузчика 

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  private loaderSubject = new Subject<LoaderState>();
  loaderState = this.loaderSubject.asObservable();
  constructor() { }
  show() {
    this.loaderSubject.next({ show: true });
  }
  hide() {
    this.loaderSubject.next({ show: false });
  }
}

после добавления этого перехватчика, вам не нужно установите для showloader значение true и false при каждом вызове API.

...