HttpInterceptor Angulaire 4.3: l'Interception de 400 réponses d'erreur

Je voudrais pour intercepter 401 et d'autres erreurs afin de réagir en conséquence. C'est mon intercepteur:

import { LoggingService } from './../logging/logging.service';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class TwsHttpInterceptor implements HttpInterceptor {

    constructor(private logger: LoggingService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.logger.logDebug(request);    
        return next.handle(request)
            .do(event => {
                if (event instanceof HttpResponse) {
                    this.logger.logDebug(event);
                }
            });
    }
}

Bien que cela fonctionne bien pour 200 demandes, il n'a pas d'intercepter l'erreur respsonses

Tout ce que je vois dans google chrome dev console est: est-ce

de la zone.js:2616 OBTENIR http://localhost:8080/backend/rest/wrongurl 404 (Pas
Trouvé)

Ou ce

de la zone.js:2616 OBTENIR http://localhost:8080/backend/rest/url 401
(Non autorisée)

Je voudrais que mon intercepteur. Ce qui me manque ?

OriginalL'auteur Tim | 2017-07-28

angular interceptor

29

Http envoie les erreurs vers le bas le flux d'erreur d'une observable, donc vous devez les attraper avec .catch (vous pouvez lire plus sur ce ici).
```
return next.handle(request)
  .do(event => {
    if (event instanceof HttpResponse) {
      this.logger.logDebug(event);
    }
  })
  .catch(err => { 
    console.log('Caught error', err);
    return Observable.throw(err);
  });
```
Ok, mais cela me donne cette erreur: [ts] Argument de type 'tre: aucune) => void" n'est pas assignable à paramètre de type 'tre: aucune, pris: Observables<HttpEvent<aucun>>) => ObservableInput<{}>'. Le Type "void" n'est pas assignable à type 'ObservableInput<{}>'.
L'ajout de "retour Observables.jeter(err);" résout le problème. Modifier votre réponse et je vais l'accepter !
comme ça? désolé je n'ai pas le tester avant de poster 🙂
mise en forme du code des œuvres dans les commentaires avec la syntaxe ` ainsi
pour le rxjs 6 monde: retour suivant.la poignée(demande) .pipe( tap(event => console.journal(event)), catchError(err => throwError(err)), );

OriginalL'auteur 0mpurdy
7

Ce n'est sans doute pas trop tard pour vous, mais j'espère que quelqu'un va le trouver utile... C'est une façon de réécrire l'-dessus instruction de retour d'erreur du journal des réponses, trop:
```
return next.handle(request).do((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse) {
    this.logger.logDebug(event);
  }
}, (error: any) => {
  if (error instanceof HttpErrorResponse) {
    this.logger.logDebug(error);
  }
});
```
Je suis en utilisant la même méthodologie pour envoyer automatiquement tous 401 non autorisé réponses directement à notre méthode de déconnexion (plutôt que de vérifier pour un 401 à chaque appel pour http):
```
return next.handle(request).do((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse) {
    //process successful responses here
  }
}, (error: any) => {
  if (error instanceof HttpErrorResponse) {
    if (error.status === 401) {
      authService.logout();
    }
  }
});
```
Il fonctionne comme un charme indiscutable. 🙂

Et si dans le cas d'une erreur, je veux enregistrer l'erreur, mais encore de retour d'un HttpResponse donc l'angle client peut afficher le message d'erreur sur l'INTERFACE utilisateur?
Si vous vouliez dire "HttpErrorResponse" dans votre question (plutôt que HttpResponse), le premier exemple dans ma réponse, ce que montre. Le succès de réponses et les réponses d'erreur sont enregistrés, puis est passé comme s'il n'y avait aucun intercepteur à tous.
je ne pouvais pas recevoir mes erreurs de validation.
Comment sont vos erreurs de validation est envoyé?

OriginalL'auteur Enrika

Pour intercepter la réponse Http erreur angulaire 6, je fais un petit truc pour la conversion des Observables à la Promesse:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   const obs = next.handle(req);

   if (!window.navigator.onLine) {
     //Handle offline error
     this.messageService.showError('No Internet Connection');
     return;
   }

   obs.toPromise().catch((error) => {
     this.messageService.progress(false);
     this.messageService.showError(error.message);
   });
   return obs;
}

OriginalL'auteur Ângelo Polotto

Vous devez vous connecter pour publier un commentaire.