Использование нового модуля HttpClient в Angular 4

Использование нового модуля HttpClient в Angular 4

От автора: релиз Angular 4.3 представил несколько новых функций. Среди них была HttpClientModule (@angular/common/http заменяет @angular/http). Эта библиотека для создания HTTP запросов меньше, проще и мощнее. Новый сервис Angular HttpClient был также представлен в HttpClientModule. С его помощью можно инициировать HTTP запрос. В этом уроке я покажу вам, как реализовать новый клиент и расскажу про его функции.

Краткий обзор

Что нужно изменить в старой версии (pre-v4) для перехода на новую (4+)

Для импорта в NgModule:

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

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

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

И для использования в сервисе:

Теперь давайте перейдем к подробному разбору.

Установка Angular 4

Для начала установите Angular CLI через Node и npm, если он еще не установлен.

Флаг –g – установить глобально. @latest – установить последнюю версию. После установки запустите следующую команду для создания нового приложения.

Использование нового модуля HttpClient в Angular 4

Будет загружен шаблон проекта, а также установятся все зависимости. Структура папок проекта:

Откройте файл package.json и обновите зависимости Angular до версии 4.3.6. Разделы dependencies и devDependencies должны выглядеть так:

В папке проекта запустите

Команда подтянет зависимости в файл package.json. Для проверки запустите веб-сервер:

Использование нового модуля HttpClient в Angular 4

Веб-сервер разработчика запустится на http://localhost:4200. Откройте этот адерс, перед вам будет следующая страница.

Использование нового модуля HttpClient в Angular 4

Установка модуля HTTP

Далее импортируйте HttpClientModule в корневой модуль приложения src/app/app.module.ts и добавьте его в свойство imports. Файл должен быть таким:

Для использования HttpClient в компонентах, его необходимо вставить в конструктор класса. Импортируйте HttpClient в src/app/app.component.ts, далее вставьте его в конструктор, вот так:

Теперь вы можете выполнять CRUD операции и делать HTTP запросы. Среди HTTP методов доступны post, put, delete, patch, head и jsonp.

HTTP GET

Для демонстрации метода get мы будем запрашивать фейковый REST API. Откройте http://jsonplaceholder.typicode.com и прокрутите страницу до Resources. На экране будет следующее:

Использование нового модуля HttpClient в Angular 4

В Resources кликните на /posts

Использование нового модуля HttpClient в Angular 4

Это куча json объектов. У каждого по 4 свойства: userId, id, title и body. Если открыть url http://jsonplaceholder.typicode.com/posts через приложение Angular, мы получим результат выше. Другие методы HTTP работают примерно так же.

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

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

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

Отредактируйте src/app/app.component.ts:

Мы вызываем API endpoint в хуке жизненного цикла ngOnInit. Хук выполняется при инициализации компонента. Сначала импортируется интерфейс OnInit. Затем этот интерфейс реализуется в определении класса. Далее мы вызываем метод ngOnInit, внутри которого мы вызываем HttpClient объект http, который мы ранее создали в конструкторе.

Мы вызываем метод get из объекта, который ожидает URL нужного нам API endpoint. Метод get возвращает observable. Чтобы получать уведомления о поступлении ответа, на этот observable необходимо подписаться. Это делается через метод subscribe. В методе subscribe мы задаем обработчик события, получающий данные, которые потом можно распечатать в консоль. Вывод консоли в браузере:

Использование нового модуля HttpClient в Angular 4

Это json объекты, полученные из http://jsonplaceholder.typicode.com/posts.

Чтобы получить доступ к любому свойству из объекта ответа, например к data.userId, необходимо бросить объект ответа в тип, содержащий соответствующие свойства. Для этого необходимо определить интерфейс. Вставьте следующий код в файл src/app/app.component.ts после импортов.

Затем отредактируйте вызов get под интерфейс DataResponse:

Теперь мы можем получить доступ к userId, title и body отдельно. Вывод в консоль должен быть таким:

Использование нового модуля HttpClient в Angular 4

Если http запрос не удался, мы можем выводить сообщение об ошибке. Для этого сначала импортируйте HttpErrorResponse из @angular/common/http. Затем создайте обработчик ошибок, добавив колбек к методу subscribe. Далее определите параметр типа HttpErrorResponse для функции обработчика ошибок:

HTTP POST

Как и раньше, для демонстрации HTTP POST будем использовать JSONPlaceholder. Однако обратите внимание, что это фейк сервис. Данные не постоянны, но API отвечает как настоящий. Конечная точка POST запроса — http://jsonplaceholder.typicode.com/posts. Если открыть этот url, вы увидите, что нам доступно 4 свойства userId, id, title и body. Чтобы с помощью этой конечной точки создать новую запись, добавьте второй вызов внутрь жизненного цикла ngOnInit:

Метод post возвращает observable, поэтому на него нужно подписаться, как и раньше. Это делается вызовом метода subscribe. В методе subscribe определяется обработчик событий, получающий данные, которые затем можно распечатать в консоли. Далее мы добавляем обработчик ошибок для печати информации при возникновении ошибок. Вывод в консоли браузера должен быть следующим:

Использование нового модуля HttpClient в Angular 4

HTTP перехватчики

Перехватчики – еще одна новая функция модуля HTTP Client. Перехватчики находятся между приложением и back end API. С их помощью можно манипулировать запросами, идущими от приложения до их принятия и отправки в back end. Верно и обратное – ответ с back end можно изменить до принятия и обработки в приложении. Для демонстрации этого мы изменим заголовки запроса get http://jsonplaceholder.typicode.com/posts/1/. Мы будем менять поле заголовка Accept-Language, идущее от API. Создайте новый файл src/app/typicode.interceptor.ts со следующим кодом:

Сначала мы импортируем injectable из @angular/core. Далее мы импортируем HttpEvent, HttpInterceptor, HttpHandler из @angular/common/http. Пакет Observable импортируется из rxjs/observable.

Далее мы добавляем декоратор @injectable, создаем класс TypicodeInterceptor, реализующий интерфейс HttpInterceptor. Далее добавляем метод interceptor в реализацию класса.

Метод принимает запрос, меняет его перед дальнейшей отправкой для обработки в приложении. Поэтому мы передаем два параметра в этот метод: сам запрос типа HttpRequest и параметр next типа HttpHandler. Метод возвращает observable типа HttpEvent<any>.

Далее вызывается метод req.clone() для клонирования оригинального HTTP запроса. В методе мы меняем поле заголовка с помощью метода req.headers.set(). Мы изменяем поле Accept-Language на значение Test.

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

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

Чтобы в нашем приложении заработали перехватчики, необходимо отредактировать файл src/app/app.module.ts.

Мы импортировали HTTP_INTERCEPTORS из @angular/common/http и класс TypicodeInterceptor, созданный ранее в src/app/typicode.interceptor.ts. Далее мы вставляем новый объект в массив, который присваивается к свойству провайдера @NgModule. Объект содержит 3 свойства:

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

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

multi: необходимо установить в multi, чтобы Angular понял, что HTTP_INTERCEPTORS массив значений, а не одно значение

Перехватчики в действии можно посмотреть на вкладке network. Перезагрузите страницу, выберите HTTP запрос на левой панели, и на правой панели отобразятся HTTP заголовки. Нам нужен запрос get по адресу http://jsonplaceholder.typicode.com/posts/1.

Использование нового модуля HttpClient в Angular 4

Заключение

Новый модуль HTTP client облегчает работу с HTTP back end интерфейсом типа REST API. Мы изучили базовую настройку HttpClientModule, продемонстрировали использование методов get и post, а также показали, как использовать новую функцию перехватчиков. Подумайте о случаях использования этой функции. Посмотрите проект на Github. Все вопросы оставляйте в комментариях.

Автор: Caleb Oki

Источник: https://scotch.io/

Редакция: Команда 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