Обработка ошибок перехватчика Angular httpClient

После прочтения документации по angular об обработке ошибок HTTP-клиента я до сих пор не понимаю, почему я не улавливаю ошибку 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 ПОЛУЧИТЬ http://localhost:8080/test 401 ()

core.js: 1449 ERROR HttpErrorResponse {заголовки: HttpHeaders, status: 401, statusText: "OK", url: "http://localhost:8080/test ", ok: false,…}


angular angular-http-interceptors angular6 angular-httpclient
person sarahwc5    schedule 23.06.2018    source источник

Ответы (5)


arrow_upward
7
arrow_downward

Вы должны поймать ошибку, используя 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);
            }
        }
}));
person Amit Chigadani    schedule 23.06.2018
comment
Подробнее об этом читайте здесь angular.io/guide/http#getting-error-details - person Amit Chigadani; 23.06.2018
comment
Я получаю эту ошибку: TS2345: аргумент типа '(err: any) = ›void' не может быть назначен параметру типа '(err: any, catch: Observable‹ HttpEvent ‹any› ›) =› ObservableInput {‹}› '. Тип void нельзя присвоить типу ObservableInput ‹{}›. - person sarahwc5; 23.06.2018
comment
Я только что упомянул синтаксис для поиска ошибок. Вы должны вернуть ошибку или правильно обработать ее там. например, вы можете сделать return Observable.throw(err); Вы также можете изменить тип возвращаемого значения на Observable<any> вместо Observable<HttpEvent<any>> - person Amit Chigadani; 23.06.2018
comment
Каким должен быть правильный результат возврата, если я просто хочу, чтобы ничего не происходило (т. Е. Это не было ошибкой)? - person sarahwc5; 23.06.2018
comment
Я попытался добавить return Observable.empty<HttpEvent<any>>(), но все равно получаю сообщение «EmptyError: нет элементов в последовательности», напечатанное в консоли. - person sarahwc5; 23.06.2018
comment
Если вы не хотите выдавать ошибку, просто верните Observable.empty () или Observable.of (false) - person Amit Chigadani; 23.06.2018
comment
При использовании Observable.empty () я все равно получаю «GET localhost: 8080 / test 403 ()» войти в мой консольный журнал, как мне этого избежать? - person sarahwc5; 23.06.2018
comment
Хотя мне кажется, что это нормальное поведение. Хотя я все еще получаю EmptyError: при загрузке страницы нет последовательных элементов. Откуда это может взяться? - person sarahwc5; 23.06.2018
comment
Я создам новый вопрос и закрою этот, спасибо. == ›stackoverflow.com/questions/51002928 / - person sarahwc5; 23.06.2018
comment
Observable.empty() устарел. Ваш обработчик ошибок должен вместо этого возвращать new Observable<HttpEvent<any>>() - person Tito Leiva; 13.05.2019

arrow_upward
7
arrow_downward

Ваш обработчик ошибок должен вернуть 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>>();
    }));
person Tito Leiva    schedule 13.05.2019

arrow_upward
1
arrow_downward

Вы должны передать значение аргумента функции 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!');
            }
        }
    });
person Daniel Caldera    schedule 23.06.2018
comment
Я до сих пор не получаю журнал "ни этого". - person sarahwc5; 23.06.2018
comment
Добавьте отладчик внутри do, проверьте, какой ответ приходит от сервера, и проверьте, почему не совпадает с двумя if. - person Daniel Caldera; 23.06.2018

arrow_upward
0
arrow_downward

Это не так, но Angular имеет лучшую возможность обрабатывать ошибки, чем перехватчик. Вы можете реализовать свой собственный ErrorHandler. https://angular.io/api/core/ErrorHandler

person Oleksii    schedule 01.11.2018
comment
Когда кто-то переходит на Stack Exchange, вопрос-ответ должен фактически содержать ответ. Не просто кучу указаний на ответ. - person Erik Philips; 10.07.2019
comment
Это ответ. Отключите документацию по Angular, а не только копипаст. @ ErikPhilips - person Oleksii; 16.07.2019
comment
Как это реализовать для обработки сетевых ошибок? В документации не так много для конкретного случая использования @Oleksii - person Black Mamba; 11.06.2020

arrow_upward
0
arrow_downward

вот пример, который я использую:

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) { }
}
person Muhammed Moussa    schedule 12.02.2020