Angular 4.3 HttpClient (получение доступа к REST Web Services через Angular)

Angular 4.3 HttpClient (получение доступа к REST Web Services через Angular)

От автора: в Angular 4.3 представлен новый модуль HttpClientModule. Он доступен в пакете @angular/common/http и повторно реализует старый HttpModule. В HttpClientModule включен новый сервис HttpClient. С его помощью можно посылать HTTP-запросы и обрабатывать ответы внутри приложения. Давайте рассмотрим, как использовать в этой версии Angular HttpClient.

Создание нового проекта Angular 4.3

Сначала необходимо создать новый проект Angular 4.3. Легче всего это сделать через Angular CLI (командную строку Angular). Если у вас еще не установлен Angular CLI, сначала выполните следующую команду для установки последней версии:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Создастся новая папка nghttp01, в которую загрузится шаблон проекта и автоматически установятся зависимости. Затем откройте package.json в любимом редакторе и посмотрите, чтобы все зависимости Angular содержали версию < 4.3.0. После обновления package.json необходимо выполнить следующую команду

в папке проекта, чтобы обновить соответствующие пакеты.

Делаем HttpClient доступным в проекте

Чтобы использовать HttpClient внутри компонентов, сначала необходимо подключить HttpClientModule в приложение Angular. Первым делом необходимо импортировать модуль HttpClient в корневой модуль приложения в файл app.module.ts:

После импорта HttpClient можно использовать в компонентах. Чтобы HttpClient стал доступен в классе компонента, необходимо вставить его в конструктор класса, как показано ниже:

HttpClient будет использовать браузерный API XMLHttpRequest для выполнения HTTP-запросов. Выполнить HTTP-запрос определенного типа можно с помощью методов, отвечающих HTTP-глаголам: get, post, put, delete, patch, head, jsonp.

Запрос данных через HttpClient

Давайте напишем простой пример, который с помощью REST API с GitHub запрашивает данные пользователя. Вставьте следующий код в app.component.ts:

В консоли браузера должно отобразиться примерно следующее:

Angular 4.3 HttpClient (получение доступа к REST Web Services через Angular)

Результат показывает, что в JSON ответ можно обращаться напрямую с помощью подписки на Observable, который возвращается из метода get.

Типизированный ответ

Из консоли браузера видно, что у возвращенного JSON объекта много свойств. Если попробовать получить доступ к одному из них с помощью точки, вы получите ошибку:

Ошибка гласит «свойство login не существует на типе Object. Данные имеют тип Object, поэтому к свойствам нельзя обращаться напрямую. Однако мы можем отнести ответ Object к типу, содержащему соответствующие свойства. Давайте определим тип интерфейса, который содержит свойства из ответа:

Теперь с помощью UserResponse давайте отнесем возвращаемый тип вызова get:

Теперь данные можно получить через data.login, data.bio и data.company. В консоли браузера теперь должен быть результат:

Angular 4.3 HttpClient (получение доступа к REST Web Services через Angular)

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

По ошибке можно получить более определенную информацию, если указать параметр типа HttpErrorResponse для функции-обработчика ошибок. HttpErrorResponse необходимо импортировать из @angular/common/http:

Отправка данных через HttpClient

Теперь давайте посмотрим, как отправлять данные через HttpClient. Для этого мы будем использовать метод post объекта HttpClient. Конечно, нам нужен backend, предлагающий REST API, который принимает POST HTTP запросы. Чтобы не ставить свой backend API, мы можем использовать JSONPlaceholder – ложный онлайн REST API для тестирования и прототипирования.
(https://jsonplaceholder.typicode.com/)

Endpoint http://jsonplaceholder.typicode.com/posts поддерживает POST HTTP-запросы. Давайте с помощью endpoint создадим новую post запись:

Здесь видно, что данные post запроса передаются в метод post в качестве второго параметра в формате JSON. Возвращаем ответ, чтобы проверить, создался ли объект:

Angular 4.3 HttpClient (получение доступа к REST Web Services через Angular)

Перехватчики

Одна из новых функций нового модуля HttpClient – доступность перехватчиков. Перехватчики находятся между вашим приложением и backend. С помощью перехватчиков можно трансформировать запрос от приложения до его принятия на backend. То же самое касается ответов. Если с backend прилетает ответ, перехватчик может его трансформировать перед получением его в приложении.

Лучше всего понять перехватчики можно на простом примере. Создайте новый файл githubauth.interceptor.ts и вставьте в него следующий код:

Класс перехватчика GithubAuthInterceptor реализует интерфейс HttpInterceptor, который входит в библиотеку @angular/common/http. Реализация интерфейса обязует нам добавить метод intercept в класс. Этот метод выполняет основную работу перехватчика. В метод передается два параметра. Первый – сам запрос. Второй – следующий обработчик HTTP, в который необходимо передать запрос для дальнейшей обработки.

В первом примере метод intercept просто передает запрос в следующий обработчик. Поняв подход перехватчика, мы можем перейти к манипулированию запросом в методе intercept:

Сначала мы создаем новый запрос с помощью метода clone. В то же время мы передаем JSON объект со свойствами заголовков. Для создания заголовка используем метод req.headers.set для свойства Authorization. С помощью этого свойства отправляется токен доступа GitHub.

Вновь созданный объект запроса (с заголовком) передается для дальнейшей обработки с помощью метода next.handle.

Подача перехватчика

Чтобы активировать перехватчик в приложении, его необходимо предоставить главному модулю приложения AppModule в файле app.module.ts:

Сперва мы импортируем GithubAuthInterceptor, после чего вставляем новый объект в массив, который назначается свойству провайдера @NgModule. Этот объект содержит три свойства:

provide – для передачи HTTP перехватчика необходимо установить в HTTP_INTERCEPTORS

useClass – необходимо задать значение типа нашего класса перехватчика

multi – необходимо задать в multi, чтобы сказать Angular, что HTTP_INTERCEPTORS – массив значений, а не одно значение

Перехватчик активен, заголовок Authorization добавлен во все запросы и посылается автоматически.

Автор: Sebastian Eschweiler

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree