Angular httpClient 拦截器错误处理答案

【问题标题】：Angular httpClient interceptor error handlingAngular httpClient 拦截器错误处理
【发布时间】：2018-06-23 09:18:33
【问题描述】：

在阅读了有关 http 客户端错误处理的 Angular 文档后，我仍然不明白为什么我没有使用以下代码从服务器捕获 401 错误：

export class interceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('this log is printed on the console!');

        return next.handle(request).do(() => (err: any) => {
            console.log('this log isn't');
            if (err instanceof HttpErrorResponse) {
                if (err.status === 401) {
                    console.log('nor this one!');
                }
            }
        });
    }
}

在控制台日志上，我也得到了这个：

zone.js:2969 GET http://localhost:8080/test401 ()

core.js:1449 ERROR HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "OK", url: "http://localhost:8080/test", ok: false, ...}

【问题讨论】：

标签： angular angular6 angular-http-interceptors angular-httpclient

【解决方案1】：

您应该使用catchError 捕获错误

return next.handle(request)
      .pipe(catchError(err => {
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                console.log('this should print your error!', err.error);
            }
        }
}));

【讨论】：

在此处了解更多信息angular.io/guide/http#getting-error-details
我收到此错误：TS2345：类型为 '(err: any) => void' 的参数不可分配给类型为 '(err: any，caught: Observable> ) => 可观察输入'。类型“void”不可分配给类型“ObservableInput”。
我刚刚提到了捕获错误的语法。您应该返回错误或在那里正确处理它。对于 ex，您可以执行 return Observable.throw(err); 您还可以将返回类型更改为 Observable<any> 而不是 Observable<HttpEvent<any>>
如果我只想“什么都没有发生”（即，这不是错误），正确的返回结果应该是什么？
我尝试添加 return Observable.empty<HttpEvent<any>>()，但我仍然在控制台中打印出“EmptyError: no elements in sequence”

【解决方案2】：

您的错误处理程序需要返回 new Observable<HttpEvent<any>>()

return next.handle(request)
    .pipe(catchError((err: any) => {
        console.log('this log isn't');
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                console.log('Unauthorized');
            }
        }

      return new Observable<HttpEvent<any>>();
    }));

【讨论】：

【解决方案3】：

您必须将参数值传递给流的 do 函数，而不是在其中创建新函数：

return next.handle(request)
    .do((err: any) => {
        console.log('this log isn't');
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                console.log('nor this one!');
            }
        }
    });

【讨论】：

我仍然没有得到“也不是这个”的日志。
在 do 中添加一个调试器，检查来自服务器的响应是什么，并检查为什么不匹配这两个 if。

【解决方案4】：

它是顶级的，但 Angular 比拦截器有更好的机会处理错误。您可以实现自己的 ErrorHandler。 https://angular.io/api/core/ErrorHandler

【讨论】：

When someone goes on Stack Exchange, the question "answer" should actually contain an answer. Not just a bunch of directions towards the answer..
就是答案。移至关闭 Angular 文档，而不仅仅是复制粘贴。@ErikPhilips
如何实现处理网络错误？对于特定用例@Oleksii，该文档没有太多内容

【解决方案5】：

这是我正在使用的一些示例：

export class ErrorHandlerInterceptor implements HttpInterceptor {

    intercept(
        request: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        const loadingHandlerService = this.inej.get(LoadingHandlerService);
        const errorHandlerService = this.inej.get(ErrorHandlerService);

        return next.handle(request)
            .pipe(
                catchError(err => {
                    loadingHandlerService.hideLoading();
                    if (err instanceof HttpErrorResponse) { errorHandlerService.handleError(err) }
                    return new Observable<HttpEvent<any>>();
                })
            );
    }

    constructor(private inej: Injector) { }
}

【讨论】：