Angular Http и HttpClient: такие же, но разные

Для нашего предстоящего тренинга в октябре в Hackages мы обновляем наши материалы по Angular до Angular 4.3.x. В этом выпуске появилась новая версия HTTP API, которая называется HttpClient. HttpClient предоставляет некоторые долгожданные функции. Он существует как отдельный модуль под названием @ angular / common / http для обеспечения ретро-совместимости с традиционным клиентом Http, живущим в модуле @ angular / http. В этой статье я покажу вам различия между Http и HttpClient.

Я расскажу, как вы можете:

  • запросить данные JSON
  • запросить данные не в формате JSON
  • прочитать ответ HTTP
  • список событий прогресса
  • создавать перехватчики в Angular

Для справки я использую Angular 4.3.3, Angular-CLI 1.3.1.

Настройка проекта

Если вы еще не установили Angular-CLI, следуйте инструкциям по установке здесь.

Идите вперед и создайте новый проект Angular-CLI, используя ng new project-name.

Затем в файле app.module.ts импортируйте HttpModule и HttpClientModule.

Добавьте его в свой массив импорта ... Ваш app.module.ts должен выглядеть так.

С этого момента мы выполним HTTP-вызов API GitHub и будем использовать этот интерфейс ниже для ответа:

Теперь мы в порядке!

Запросить данные JSON

Давайте сначала запросим данные JSON, используя как Http, так и HttpClient.

# Использование HTTP

# Использование HttpClient

Для данных JSON этап синтаксического анализа больше не нужен.

Запрос данных не в формате JSON

Мы можем продолжить запрос данных, отличных от JSON, снова используя Http и HttpClient.

# Использование HTTP

Вместо вызова .json(), чтобы вернуть тело как проанализированный объект JSON, мы можем использовать другие доступные методы синтаксического анализа:

  • .text(), который возвращает тело в виде строки
  • .arrayBuffer(), который возвращает тело как ArrayBuffer
  • .blob(), который возвращает тело как Blob

# Использование HttpClient

HttpClient предоставляет параметр responseType, который сообщает HttpClient, как анализировать основной ответ. По умолчанию для responseType установлено значение json. Возможные значения параметров совпадают с именем метода Http: text, arrayBuffer, blob..

Чтение ответа HTTP

Давайте теперь посмотрим на ответы HTTP и на различия, которые дают нам Http и HttpClient.

# Использование HTTP

В Http полный ответ предоставляется непосредственно клиентом. Так что добавить нечего :)

# Использование HttpClient

Для HttpClient нам нужно предоставить параметр observe, чтобы сообщить клиенту, какие данные он должен возвращать. По умолчанию для observe установлено значение body. Возможные значения для observe options:

  • body, который возвращает проанализированное тело
  • response, который возвращает полный ответ (наблюдаемый для HttpResponse)
  • events, который возвращает полный поток событий (наблюдаемый для HttpEvent)

Перехватчик, также известный как промежуточное ПО

Перехватчики были особенностью AngularJS, которая была по-другому реализована в новой версии Angular. Вам нужно расширить класс Http.

Перехватчики - идеальное место для:

  • захватывать каждый запрос и манипулировать им перед отправкой
  • ловить каждый ответ и обрабатывать его до завершения звонка

Теперь давайте посмотрим, как мы можем создавать перехватчики запросов и ответов с помощью Http и HttpClient.

# Использование HTTP: перехватчики запросов и ответов

Мы создали MyCustomHttp, который расширяет класс Http.

Затем мы заменяем метод HTTP GET некоторыми методами обработки запросов:

  • setAuthorizationHeader: перехватчик запросов для добавления Authorization Header
  • catch401: перехватчик ответа, чтобы перехватить все 401 Http response

Наконец, мы регистрируем его в провайдерах AppModule, используя factory dependency injection.

Внедрение фабричных зависимостей:

Регистрация:

Если этот синтаксис для вас новичок, прочтите этот отличный блог о внедрении зависимостей с помощью Whiletram.

Теперь при каждом запросе вы должны видеть заголовок авторизации и иметь возможность перехватывать весь ответ 401.

# Использование HttpClient: перехватчики запросов и ответов

Новый HttpClient предлагает другой подход. Вместо создания класса, расширяющего класс Http, вы объявляете класс, реализующий интерфейс HttpInterceptor.

Затем вы регистрируете его в провайдерах AppModule:

Если вы не знакомы с этим синтаксисом регистрации, прочтите этот блог о внедрении зависимостей с помощью Whiletram.

Progress events: загрузка / скачивание событий, прослушивание

# Использование HttpClient

Новый HttpClient предоставляет простой способ получать уведомления о ходе загрузки / выгрузки. Просто добавьте параметр { reportProgress: true } к объекту HttpRequest, и все готово.

# Использование HTTP

Я не нашел простого и понятного способа выполнить этот сценарий. Если у кого-то есть хороший способ сделать это, я буду рад обновить статью. Не стесняйтесь комментировать свое решение.

Подводить итоги

В этой статье мы рассмотрели новый HTTP-клиент в Angular и его основные функции. HttpClient удалил некоторый шаблонный код и продвигает композицию вместо наследования для реализации перехватчиков.

Благодарим за прочтение и не стесняйтесь присылать мне отзывы!

Буба (Бубакар С. Барри) :).

Более подробную информацию о Взломах вы можете найти на нашем сайте. Мы - компания, управляемая сообществом, которая предлагает обучение высокого уровня по новейшим фреймворкам и технологиям, связанным с JavaScript. Мы также любим вносить свой вклад в открытый исходный код и организовывать бесплатные общественные мероприятия по всей Европе! Следите за ближайшими к вам мероприятиями на https://hackages.io.