web-dev-qa-db-fra.com

Accès au corps de réponse d'erreur HTTP depuis HttpInterceptor dans Angular

J'ai un HttpInterceptor pour détecter les erreurs et les afficher dans un modal. Outre le code et le message d'erreur, je voudrais également montrer le corps de la réponse qui contient en fait une description plus précise de l'erreur (par exemple, sur une erreur de serveur interne 500). Comment puis-je y parvenir en angulaire? (J'utilise la version 4.3.6.)

J'ai déjà examiné des questions connexes, mais des réponses comme HttpErrorResponse._body ou similaire ne fonctionnent pas pour moi. En outre, lors de l'inspection de la réponse d'erreur dans la console, HttpErrorResponse.error est défini sur null.

Voici à quoi ressemble actuellement mon intercepteur:

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  public constructor(private httpErrorService: HttpErrorService) { }

  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {
    }, (error: HttpErrorResponse) => {
      console.log('HTTPERROR INTERCEPTOR');
      console.log(error);
      if (error.status >= 400) {
        this.httpErrorService.onError(error);
      }
    });
  }
}
angulartypescripthttp-errorangular-http-interceptors
11
Severin

La réponse s'applique aux versions de Angular ci-dessous 6.

Le corps doit être disponible dans la propriété error, donc:

return next.handle(req).do(event => {
}, (error: HttpErrorResponse) => {
  console.log(error.error); // body
  ...
});

Voici l'essentiel de l'implémentation à partir des sources :

if (ok) {
  ...
} else {
  // An unsuccessful request is delivered on the error channel.
  observer.error(new HttpErrorResponse({
    // The error in this case is the response body (error from the server).
    error: body,   <--------------------
    headers,
    status,
    statusText,
    url: url || undefined,
  }));
}

Pour en savoir plus sur la mécanique derrière les intercepteurs, lisez:

14
Max Koretskyi aka Wizard

Pour utiliser pleinement TypeScript, je crée généralement une interface qui étend HttpErrorResponse:

interface APIErrorResponse extends HttpErrorResponse {
   error: {
      id?: string
      links?: { about: string }
      status: string
      code?: string
      title: string
      detail: string
      source?: {
         pointer?: string
         parameter?: string
      }
      meta?: any
      }
}

Après cela, attribuez simplement APIErrorResponse au lieu de HttpErrorResponse à votre objet d'erreur et accédez à l'erreur personnalisée de votre serveur comme mentionné ci-dessus: error.error

2
Daniel Nitu