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

Question

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

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

Answer 1

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

我也使用 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);
    }));
  }

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

I have an http error intorceptor in my angular app. I am catching all errors from the backend. How can I display all the errors?

error-handling

interceptor

angular