Наблюдаемая ошибка углового HTTP-запроса не обнаруживает ошибку?
Angular 6 с использованием HttpClient. На данный момент перехватчики не реализованы.
У меня есть служба администратора, в которой я выполняю http-вызов MSGraph. В этом случае я получаю сообщение об ошибке 400 неверный запрос, которое отправляю обработчику уведомлений.
Я вставил этот console.info, чтобы убедиться, что блок ошибок вообще срабатывает, и еще один cnosole.log, чтобы увидеть, являются ли «данные», возвращаемые с сервера, ошибкой.
Ни один из console.infos не запускается, но глобальный обработчик ошибок по-прежнему отображает в консоли ответ на 400 неверных запросов.
Я хотел бы иметь возможность использовать этот ответ и отображать удобное для пользователя сообщение.
Код:
this.http.get(this.GRAPH_ROOT_URL + this.APP_ID, { headers }).subscribe(data => {
this.notification.done(data);
console.info(data);
}), error => {
this.notification.error(`Error getting users from Microsoft GRAPH API. Reason: ${error}`)
console.info("this is observable error", error);
}
Извините, Angular6 - забыл добавить!
добавить еще один параметр для подписки - полный обратный вызов и console.info там
@Ludevik, можно было бы подробнее рассказать об этом? Не совсем уверен, как будет выглядеть этот параметр.
я имел ввиду нормальный обратный вызов: () => console.info('Completed'). Функция подписки принимает 3 параметра - успех, ошибка и завершение, все это обратные вызовы, поэтому вы передаете туда некоторую функцию, точно так же, как функции, которые вы передаете для успеха и ошибки. Моя идея заключалась в том, чтобы был вызван полный обратный вызов.
Ответы 1
Angular 6 использует RxJS 6, в который внесен ряд изменений. Предполагая, что вы это используете, я бы использовал вот что:
Вот что я бы использовал:
this.http.get(this.GRAPH_ROOT_URL + this.APP_ID, { headers })
.pipe(catchError(err => {
this.alert.error('There was an error getting data');
return throwError(err);
})).subscribe(data => this.notification.done(data));
Таким образом, вы используете pipe для вызова catchError, который правильно обрабатывает ошибки сервера.
Чтобы использовать catchError, вам нужно сначала импортировать его, например:
import { catchError } from 'rxjs/operators';
Просто попробовал это - единственная проблема - это часть .pipe(catchError - catchError нигде не определен / недоступен. Мне удалось импортировать throwError из rxjs. Я действительно использую RxJS6 - не последнюю версию, поскольку она вносит критические изменения во многие вещи, которые я использую. Но все же RxJS6
Спасибо! Это работает именно так, как задумано. Как бы то ни было, мне нужно реорганизовать 20+ HTTP-запросов сейчас, надо было протестировать это намного раньше! Единственная проблема заключается в том, что теперь, когда я пытаюсь написать объект err в службе, он отображается как [объект объекта]; Я подозреваю, что это из-за порядка, в котором я работаю, и немного подправлю его.
@SebastianG Пока вы собираетесь потратить время, сделайте еще один шаг и превратите HttpClient в собственный сервис. Это действительно упрощает такие вещи и дает вам дополнительные возможности. Например, мой реальный код также включает автоматический повтор для GET и визуальные уведомления об успехе или неудаче.
Есть ли шанс, что у вас есть этот пример где-нибудь на github, чтобы я мог посмотреть? Я оборачиваю все в сервис, просто у меня есть 4 сервиса с наблюдаемыми в 2 приложениях, над которыми я работаю сейчас, почти все они с архитектурой redux. Если мне удастся сделать это прямо на уровне обслуживания, будет совсем несложно использовать их в компонентах.
Извини, нет. Моя служба в основном имеет те же функции Get, Post и т. д., Но добавляет вызовы pipe для catchError и retry (только для Get). Он также вызывает службу уведомлений, которая кажется похожей на вашу. Дело в том, что он дает вам возможности, и вы можете расширяться по своему желанию. У меня также есть определенные перегрузки, которые автоматически помещают отдельные объекты в массивы и так далее. Вы, вероятно, могли бы многое из этого сделать и с перехватчиками, но я всегда закрывал это.
Я понимаю, мой единственный вопрос - это логика повторной попытки. Это исключительно в случае тайм-аута или есть другие преимущества повторной попытки GET-запроса? Кстати, большое спасибо за вашу помощь, это было очень ценно для меня.
Ага. Это простой .pipe(retry(2)), добавленный непосредственно перед моим pipe для catchError. Таким образом, он делает максимум три попытки и только потом возвращает ошибку. retry импортируется из того же модуля, что и catchError.
ха! это было бы очень ценно, не могу поверить, что не подумал об этом! Спасибо всем, чувак. Удачи!
Это не работает. Ответ BadRequest по-прежнему вызывает исключение в браузере, но никогда не попадает в код.
Какая версия Angular?