¿Cómo mostrar spinner para cada solicitud HTTP en angular 5?

Esta sección ha sido aprobado por nuestros expertos así se garantiza la veracidad de este post.

Solución:

Puede usar Angular HttpInterceptor para mostrar una ruleta para todas sus solicitudes. Aquí hay un buen artículo mediano sobre cómo implementar un interceptor http

Además, tendrá que crear un servicio / módulo spinner e inyectarlo en su interceptor http. Finalmente, en su método de intercepción puede usar el finally rxJs para detener su spinner. Aquí hay una implementación simple:

intercept(req: HttpRequest, next: HttpHandler): Observable> 
    this.spinnerService.start();
    return next.handle(req).finally(res => this.spinnerService.stop() );

¡Disfrutar!

Bono: aquí hay un ejemplo de implementación del servicio spinner

Enlace de origen

Crea un servicio

//loader.service.ts
import  Injectable  from '@angular/core';
import  BehaviorSubject  from 'rxjs';

@Injectable(
  providedIn: 'root'
)
export class LoaderService 

  public isLoading = new BehaviorSubject(false);
  constructor()  

Crear interceptor de cargador

    // loader.interceptors.ts
    import  Injectable  from '@angular/core';
    import 
        HttpErrorResponse,
        HttpResponse,
        HttpRequest,
        HttpHandler,
        HttpEvent,
        HttpInterceptor
     from '@angular/common/http';
    import  Observable  from 'rxjs';
    import  LoaderService  from './loader.service';

    @Injectable()
    export class LoaderInterceptor implements HttpInterceptor 
        private requests: HttpRequest[] = [];

        constructor(private loaderService: LoaderService)  

        removeRequest(req: HttpRequest) 
            const i = this.requests.indexOf(req);
            if (i >= 0) 
                this.requests.splice(i, 1);
            
            this.loaderService.isLoading.next(this.requests.length > 0);
        

        intercept(req: HttpRequest, next: HttpHandler): Observable> 

            this.requests.push(req);
            console.log("No of requests--->" + this.requests.length);
            this.loaderService.isLoading.next(true);
            return Observable.create(observer => 
                const subscription = next.handle(req)
                    .subscribe(
                        event => 
                            if (event instanceof HttpResponse) 
                                this.removeRequest(req);
                                observer.next(event);
                            
                        ,
                        err => 
                            alert('error returned');
                            this.removeRequest(req);
                            observer.error(err);
                        ,
                        () => 
                            this.removeRequest(req);
                            observer.complete();
                        );
                // remove request from queue when cancelled
                return () => 
                    this.removeRequest(req);
                    subscription.unsubscribe();
                ;
            );
        
    

Ahora cree un componente de cargador y luego agregue el componente de la aplicación

  //loader.interceptor.ts
  import  Component, OnInit  from '@angular/core';
  import  LoaderService  from '../loader.service';

  @Component(
    selector: 'app-loading',
    templateUrl: './loading.component.html',
    styleUrls: ['./loading.component.css']
  )
  export class LoaderComponent implements OnInit 

    loading: boolean;
    constructor(private loaderService: LoaderService) 
      this.loaderService.isLoading.subscribe((v) => 
        console.log(v);
        this.loading = v;
      );
    
    ngOnInit() 
    

  

Esto no tiene nada que ver con HttpClient o HTTP Requests. Se trata de cómo manejar las llamadas asincrónicas en general (HTTP o no).

Deberías

    
Your Content

y en el archivo ts:

loading: boolean = true;

methodToTriggerRequest() 
    this.loading = true;
    this.http.get(...).subscribe(response => 
        if (resposnseNotAnError(response)) this.loading = false
    )

Si piensas que ha sido útil nuestro artículo, te agradeceríamos que lo compartas con el resto seniors de esta manera contrubuyes a dar difusión a este contenido.

---

---

Utiliza Nuestro Buscador