如何使用 Http 拦截器处理 Angular 中的服务器错误

Question

我正在尝试在 Angular 项目中处理来自后端的服务器错误。我正在使用角度 HTTP 拦截器。这是我的拦截器服务类

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {

  constructor() { }
    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}`;
                        console.log(errorMessage);
                    } else {
                        // server-side error
                        errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
                    }
                    console.log(errorMessage);
                    return throwError(errorMessage);
                })
        );

    }
}

我已经在 app.module.ts 文件中添加了这个。

providers:[ [{ provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }]
    ]

如果我检查并签入 UI，我可以看到红色的 500 服务器错误。如何通过在我的 Angular 项目中结合这个 http 拦截器在 html 代码中显示用户友好的消息。我可以使用这个 http 拦截器在 UI 中显示用户友好的错误消息吗？如果我使用 http 拦截器，是否需要使用代理？

Answer 1

我在我的项目和 toastr 中使用这个功能来提醒！

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request).pipe(
        map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                return event;
            }
        }),
        catchError(error => {
            if (error instanceof HttpErrorResponse) {
                if (error.status === 500) {
                    toastr.remove();
                    toastr.error(error.statusText.toUpperCase(), error.status);
                    return throwError(error);
                } else if (error.status === 400) {
                    if (error.error && typeof error.error === 'string') {
                        toastr.remove();
                        toastr.error(error.error.toUpperCase(), error.status);
                    } else {
                        toastr.remove();
                        toastr.error('something went wrong!'.toUpperCase(), error.status);
                    }
                    return throwError(error);
                } else if (error.status === 404) {
                    toastr.remove();
                    toastr.error('api not found'.toUpperCase(), error.status);
                    return throwError(error);
                } else {
                    return throwError(error);
                }
            }
        })
    );
}