时间戳

首页 > 解决方案 > 我的 Angular 应用程序中有一个 http 错误接收器。我正在从后端捕获所有错误。如何显示所有错误？

angular - 我的 Angular 应用程序中有一个 http 错误接收器。我正在从后端捕获所有错误。如何显示所有错误？

问题描述

我知道我可以导航到我想要显示错误的组件，但是我实际上如何从拦截器中获取错误并进入组件类。我知道对于组件，我必须有一个属性来保存我的对象的值才能显示它们，而对于那些我有 get、post、put、update 或 delete 方法的组件，我会从后端获取响应。我对此很陌生，只是想学习最佳实践，我得到的建议是在我的客户端 catch 块中放置一个 router.navigate ，它将用户重定向到带有自定义消息的组件，我了解如何这样做，但为了测试目的，我想在我的 api 的后端实际显示自定义错误消息。我是否必须创建一个服务来获取这些，或者我可以将它们从拦截器中取出？我将不胜感激任何帮助或帮助。在此先感谢。

import {
          HttpEvent,
          HttpHandler,
          HttpRequest,
          HttpErrorResponse,
          HttpInterceptor
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export class ErrorIntercept implements HttpInterceptor {
   intercept(
     request: HttpRequest<any>,
        next: HttpHandler
     ): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
           retry(1),
              catchError((error: HttpErrorResponse) => {
                let errorMessage = '';
                  if(error.error instanceof ErrorEvent) {
                    //Client side error
                  errorMessage = `Error: ${error.error.message}`;
                  router.navigate('/login');

                   } else {
                    //server side error
                     errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
                                   router.navigate('/login');

                          }
                     console.log(errorMessage);
                     return throwError(errorMessage);
                          })
                    )
          }
}

标签： angularerror-handlinginterceptor

解决方案

嗨，只需使用您可以从应用程序的任何部分点击的任何警报消息服务，它将在您的应用程序中显示为敬酒消息。

我还使用ngx-toastr实现了这个，它是一个 npm 包，只需安装并调用它的服务

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(
    private authenticationService: AuthenticationService,
    private toastr: ToastrService
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(err => {
      if (err.status === 401) {
        // auto logout if 401 response returned from api
        this.authenticationService.LogoutUser();
        location.reload(true);
      }
      this.toastr.error(AppMessages.SOME_THING_WENT_WRONG);
      // this.alertService.error('Something went wrong');
      const error = err.error.message || err.statusText;
      this.GetSetLogForServer(err);
      return throwError(error);
    }));
  }

推荐阅读