Angular 4.3 предоставляет нам новый, более простой способ обработки HTTP-запросов с помощью библиотеки HttpClient. Она носит такое имя, чтобы избежать критических конфликтов, которые могут случиться в вашем коде, если вы использовали библиотеку Http. Также HttpClient предоставляет расширенные функции: возможность прослушивать события прогресса, перехватчики для отслеживания или изменения запросов и ответов.
Примечание: Для работы HttpClient требуется Angular 4.3 или выше.
Установка HttpClient
Для начала нужно импортировать HttpClientModule из @angular/common/http в модуль вашего приложения, app.module.ts:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component';
Сразу после этого вы можете использовать HttpClient:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class DataService { constructor(private http: HttpClient) {}
Основы работы HttpClient
Базовые запросы GET, POST, PUT, PATCH или DELETE выполняются очень похоже на то, как это делалось в старом Http API. Одно из основных отличий здесь заключается в том, что HttpClient по умолчанию ожидает ответ JSON, поэтому явно обрабатывать ответ JSON больше нет необходимости.
Вот пример запроса GET:
// ... constructor(private http: HttpClient) {} getData() { this.http.get(this.url).subscribe(res => { this.posts = res; }); }
Если в качестве ответа вы ожидаете не JSON, а что-то другое, вы можете указать ожидаемый тип ответа, используя объект с ключом responseType:
getData() { this.http.get(this.url, { responseType: 'text' }).subscribe(res => { this.data = res; }); }
Вы также можете определить интерфейс для формы ответа и проверку типа для этого интерфейса:
interface Post { title: string; body: string; }; // ... constructor(private http: HttpClient) {} getData() { this.http.get<Post>(this.url).subscribe(res => { this.postTitle = res.title; }); }
По умолчанию HttpClient возвращает тело ответа. Чтобы получить полный ответ, можно передать объект с ключом observe, которому присвоено значение ‘response’. Это может быть полезно для проверки некоторых заголовков:
getData() { this.http.get<Post>(this.url, { observe: 'response' }).subscribe(res => { this.powered = res.headers.get('X-Powered-By'); this.postTitle = res.body.title; }); }
Запросы POST, PUT и PATCH
Отправить запрос POST, PUT или PATCH так же просто:
postData() { this.http.post(this.url, this.payload).subscribe(); }
Обратите внимание: нам все еще нужно подписаться, чтобы отправить запрос. В противном случае запрос будет холодным.
Вероятно, вы, захотите обрабатывать ответы или ошибки:
postData() { this.http.post(this.url, this.payload).subscribe( res => { console.log(res); }, (err: HttpErrorResponse) => { console.log(err.error); console.log(err.name); console.log(err.message); console.log(err.status); } ); }
Ошибка запроса имеет тип HttpErrorResponse и содержит, среди прочего, имя ошибки, сообщение и статус сервера.
Опции для передачи заголовков или параметров запроса также можно добавлять в запрос POST, PUT или PATCH – для этого в переданном объекте в качестве третьего аргумента нужно использовать ключи headers или params:
updatePost() { this.http .put(this.url, this.payload, { params: new HttpParams().set('id', '56784'), headers: new HttpHeaders().set('Authorization', 'some-token') }) .subscribe(...); }
Обратите внимание на классы HttpParams и HttpHeaders. Вам также нужно будет импортировать их из @angular/common/http.
События выполнения
У HttpClient есть замечательная новая функция – это возможность отслеживать события выполнения для любого типа запроса. В течение жизненного цикла события запроса будет доступна разная информация. На примере запроса GET это выглядит так:
import { Injectable } from '@angular/core'; import { HttpClient, HttpRequest, HttpEvent, HttpEventType } from '@angular/common/http'; @Injectable() export class DataService { url = '/some/api'; constructor(private http: HttpClient) {} getData() { const req = new HttpRequest('GET', this.url, { reportProgress: true }); this.http.request(req).subscribe((event: HttpEvent<any>) => { switch (event.type) { case HttpEventType.Sent: console.log('Request sent!'); break; case HttpEventType.ResponseHeader: console.log('Response header received!'); break; case HttpEventType.DownloadProgress: const kbLoaded = Math.round(event.loaded / 1024); console.log(`Download in progress! ${ kbLoaded }Kb loaded`); break; case HttpEventType.Response: console.log('😺 Done!', event.body); } }); } }
Сначала нам нужно собрать объект запроса, создав экземпляр класса HttpRequest и используя параметр reportProgress. Затем мы подписываемся на этот объект запроса, чтобы инициировать запрос и прослушивать различные типы событий в течение жизненного цикла запроса. Мы можем соответствующим образом реагировать в зависимости от типа события. На данный момент доступны такие типы событий: Sent, UploadProgress, ResponseHeader, DownloadProgress, Response и User.
В приведенном выше примере мы получили объем данных, загруженных из ответа GET. Работая с запросами POST или PUT, вы также можете получить полезную нагрузку в процентах (для этого нужно использовать что-то типа 100 * event.loaded / event.total). Это позволяет очень легко показать пользователю индикатор выполнения.
Заключение
В этом руководстве мы рассмотрели основы HttpClient. Обратитесь к официальной документации, чтобы получить более подробную информацию об этой библиотеке.
Читайте также: Angular 8: обновление и обзор новых функций