В Angular 4.3 был добавлен новый более простой способ обработки http запросов с помощью библиотеки HttpClient. Она доступная под новым именем, чтобы избежать конфликтов с текущей Http библиотекой. HttpClient также предоставляет продвинутую функциональность: возможность слушать события прогресса и перехватчики для мониторинга или изменения запросов или ответов сервера.

Установка

Сначала, вам нужно импортировать модуль HttpClientModule с @angular/common/http в вашем app модуле.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

А затем вы можете использовать HttpClient так как бы вы делали со старым API.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class APIService{
  constructor(private http: HttpClient) {}
}

Пример использования

Отправка базовых GET, POST, PUT, PATCH или DELETE запросов очень похожа на работу с старым Http API. Одно существенное отличие состоит в том что ответ в формате JSON ожидается по умолчанию, по этому уже не нужно каждый раз париться ответы с сервера.

Пример GET запроса

getFriends() {
  this.http.get(`${this.baseUrl}/friends`).subscribe(res => {
    this.friends = res;
  });
}

Если вы ожидаете что нибудь не в JSON формате, вы можете задать ожидаемый тип ответа используя объект с опцией responseType.

getPrivacyPolicy() {
  this.http.get(`${this.baseUrl}/privacy_policy.txt`, { responseType: 'text' }).subscribe(res => {
    this.data = res;
  });
}

Также вы можете задать интерфейс для проверки типов результата запроса.

interface Profile{
  userName: string;
  photoUrl: string;
  id: string;
};
getProfile() {
  this.http.get<Profile>(`${this.baseUrl}/profile`).subscribe(res => {
    this.profile= res;
  });
}

По умолчанию HttpClient возвращает тело запроса. Но вы можете передать параметр { observe: ‘response’ } для получения полного объекта ответа. Это может быть полезно когда вам нужно проверить метаданные запроса/ответа, например хедеры.

getProfile() {
  this.http.get<Profile>(`${this.baseUrl}/profile`,{ observe: 'response' }).subscribe(res => {
    this.accessToken = res.headers.get('X-Access-Token');
    this.profile= res.body;
  });
}

Post, put and patch запросы

Отправка POST, PUT или PATCH также очень проста

addFriend() {
  this.http.post(`${this.baseUrl}/friend`, this.payload).subscribe();
}

Возьмите на заметку то, что теперь нужно обязательно вызвать метод subscribe для того, чтобы выполнить запрос. Без вызова subscribe запрос не будет отправлен.
В POST, PUT или PATCH запросы можно передавать хедеры и query параметры, используя ключи headers и params в третьем объекте аргументе.

updateProfile() {
  this.http
    .put(`${this.baseUrl}/profile`, this.payload, {
      params: new HttpParams().set('id', 'someId'),
      headers: new HttpHeaders().set('X-Access-Token', 'my-token')
    })
    .subscribe(...);
}

Для использования классов HttpParams и HttpHeaders их нужно импортировать с @angular/common/http

События прогресса запроса

Новой мощной особенностью HttpClient является возможность слушать события прогресса. Такие события можно слушать для любых типов запросов
Пример для GET запроса

@Injectable()
export class APIService{
  getData() {
    const req = new HttpRequest('GET',`${this.baseUrl}/profile`, {
      reportProgress: true
    });
    this.http.request(req).subscribe((progressEvent: HttpEvent<any>) => {
      switch (progressEvent.type) {
        case HttpEventType.Sent:
          console.log('Запрос отправлен');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Получены хедеры ответа');
          break;
        case HttpEventType.DownloadProgress:
          const kilobytesLaoded= Math.round(event.loaded / 1024);
          console.log(`Загрузка в процессе ${ kilobytesLaoded }Kb загружено`);
          break;
        case HttpEventType.Response:
          console.log('Запрос завершен', event.body);
      }
    });
  }
}

Заключения

В этой статье мы рассмотрели базовые методы HttpClient