Angular 4 HttpInterceptor: Lader ein- und ausblenden

Question

Ich habe die Schnittstelle HttpInterceptor implementiert, um die ausgehenden Anfragen und die eingehenden Antworten abzufangen.

Ich möchte ein Ladeprogramm anzeigen, wenn eine Anforderung erstellt wird, und dieses Ladeprogramm ausblenden, wenn eine Antwort empfangen wird.

Obwohl der folgende Code funktioniert, wenn eine HttpResponse erkannt wird, aber kein HTTP-Fehler erkannt wird (wenn der Antwortcode nicht 200 ist), wird der Ladevorgang daher nicht ausgeblendet.

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
constructor(private loaderService: LoaderService) { } 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    this.loaderService.show(); 

    return next 
     .handle(req) 
     .do(event => { 
      //nothing is printed when a Http failure occurs 
      console.log('detecting event ', event); 
      if (event instanceof HttpResponse) { 
       console.log('detecting http response'); 
       this.loaderService.hide(); 
      } 
     }); 
    } 
} 

Answer 1

Versuchen Hinzufügen von Fehler mit Fang zu den beobachtbaren nächsten Handhabung:

.catch((error: any) => { 
     if (error instanceof HttpErrorResponse) { 
      this.loaderService.hide(); 
      // show the error to the user here 
     } else { 
      return Observable.throw(error); 
     } 
}) 

Answer 2

Was ich empfehlen, einfach ist es, ein schließlich Operator hinzuzufügen, die die Arbeit in beiden Erfolgs- und Fehlerfällen tun würde:

import 'rxjs/add/operator/finally'; 

// ... 

.finally(()=> this.loaderService.hide()) 

Answer 3

Das mit der .do-Methode erstellte Observable führt für jeden von der Quelle ausgegebenen Wert, Fehler und Abschluss Nebenwirkungen aus. In der Tat spioniert es auf dem ursprünglichen Observable und löst diese Nebenwirkungen aus, wenn es etwas passieren sieht.

Siehe Dokumentation here.

Sie können Ihre eigenen Aktionen durchführen, wie Sie bereits für den Wert in Ihrem Beispiel tun, einen Handler für den Fehler durch Zugabe:

return next 
    .handle(req) 
    .do(event => { 
     //nothing is printed when a Http failure occurs 
     console.log('detecting event ', event); 
     if (event instanceof HttpResponse) { 
      console.log('detecting http response'); 
      this.loaderService.hide(); 
     } 
    }, (err: any) => { 
     console.log('... error occurred'); 
     this.loaderService.hide(); 
    }); 

Es besteht auch die Fertigstellung Nebenwirkung, die in diesem von Nutzen sein kann Szenario.