В 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