В этой статье мы обсудим некоторые способы обработки ошибок при выполнении HTTP-запросов в Angular.

Прежде всего, давайте создадим новый проект Angular с именем exercise1. Затем мы создадим в этом проекте три компонента и одну службу. srcКаталог для данного проекта отображается ниже.

В app.module.tsфайле мы импортируем HttpClientModule.

В app.component.htmlмы включим все три компонента следующим образом:

Теперь напишем наш сервис для создания HTTP-запросов в api-call.service.tsфайле.

Теперь мы создадим три кнопки в трех компонентах. При нажатии кнопки будет вызвана функция, прикрепленная к этой кнопке, которая, в свою очередь, отправит HTTP-запрос GET в конечную точку API и отобразит данные на странице.

У example-one.component.htmlи example-one.component.tsесть следующий код -

Точно так же два других компонента имеют следующий код -

Теперь, если мы нажмем эти кнопки, мы получим следующий результат -

Обработка ошибок

При выполнении HTTP-запроса очень часто в какой-то момент мы сталкиваемся с ошибками. Чтобы эффективно обрабатывать эти ошибки, не мешая работе пользователя, у нас есть несколько способов, которые описаны ниже:

Сделаем небольшую опечатку в нашем baseUrlin- api-call.service.tsфайле. Мы изменимbaseUrl

из

https://jsonplaceholder.typicode.com/todos/

https://jsonplaceholder.typicode.com/tod/

Поскольку мы знаем, что второй аргумент subscribeметода - это функция для обработки ошибок, поэтому мы можем использовать это для перехвата ответа об ошибке.

Мы внесем некоторые изменения в example-one.component.tsи example-one.component.html.

Теперь, когда мы нажмем на первую кнопку, мы получим следующий результат -

Второй способ

В этом методе мы будем использовать Subjectfrom rxjs.

Для этого нам нужно изменить api-call.service.tsфайл.

Здесь мы создаем две новые наблюдаемые, используя Subjectдля результата и ошибки. Если вызов HTTP внутри fetchDataTwo()функции успешен, он выдаст данные ответа. Но если это не удается, выдается сообщение об ошибке.

Мы также модифицировать example-two.component.tsи example-two.component.htmlфайлы.

Теперь, когда мы нажмем на вторую кнопку, мы получим следующий результат -

Третий способ

В этом методе мы будем обрабатывать ошибки с помощью catchErrorоператора rxjs.

Мы изменим api-call.service.tsфайл следующим образом -

Здесь, в функции fetchDataThree(), если мы получили ответ успешно, то мы изменяем ответ с помощью mapоператора rxjs. Если мы получаем ошибку при извлечении данных, то мы ловим эту ошибку с помощью catchErrorоператора rxjs. После обнаружения ошибки мы генерируем этот ответ об ошибке с помощью throwErrorнаблюдаемого.

Мы также модифицировать example-three.component.tsи example-three.component.htmlфайлы.

Теперь, когда мы нажмем на третью кнопку, мы получим следующий результат -