web-dev-qa-db-ja.com

AngularでHttpInterceptorからHTTPエラー応答本文にアクセスする

エラーをキャッチしてモーダルで表示するHttpInterceptorがあります。エラーコードとメッセージに加えて、エラーのより正確な説明を実際に保持する応答の本文も表示したいと思います（例：500内部サーバーエラー）。角度でこれを達成するにはどうすればよいですか？ （バージョン4.3.6を使用しています。）

私はすでに関連する質問を見ましたが、HttpErrorResponse._bodyまたは同様のもののような答えは私にはうまくいきません。また、コンソールでエラー応答を検査するとき、HttpErrorResponse.errorはnullに設定されます。

現在のインターセプターの外観は次のとおりです。

@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

答えは、Angular below 6のバージョンに適用されます。

ボディはerrorプロパティで利用可能である必要があります。

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

ここに実装の要点があります ソースから ：

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,
  }));
}

インターセプターの背後にあるメカニズムの詳細については、以下をお読みください。

14
Max Koretskyi aka Wizard

TypeScriptを最大限に活用するには、通常、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
      }
}

その後、HttpErrorResponseの代わりにAPIErrorResponseをエラーオブジェクトに割り当て、上記のようにサーバーのカスタムエラーにアクセスします：error.error

2
Daniel Nitu