Використання нового модуля HttpClient в Angular 4

18

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

Короткий огляд

Що потрібно змінити в старій версії (pre-v4) для переходу на нову (4+)

Для імпорту в NgModule:

// below v4 ==========================================
import { HttpModule } from ‘@angular/http’;

@NgModule({
imports: [
HttpModule
]
})

// v4+ ===============================================
import { HttpClientModule } from ‘@angular/common/http’;

@NgModule({
imports: [
HttpClientModule
]
})

І для використання в сервісі:

// below v4 ==========================================
import { Http } from ‘@angular/http’;

constructor(private http: Http) {}

// v4+ ===============================================
import { HttpClient } from ‘@angular/common/http’;

constructor(private http: HttpClient) {}

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

Установка Angular 4

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

npm install -g @angular/[email protected]

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

ng new httptutorial

Використання нового модуля HttpClient в Angular 4

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

// end-to-end-tests
|- e2e/
|—— app.e2e-spec.ts
|—— app.po.ts
|—— tsconfig.e2e.json
// npm dependencies
|- node_modules/
// public facing app. built things go here. this wont show until we run a build
|- dist/
// where most of the work will be done
|- src/
|—— app/
|—— app.component.css|html|spec.ts|ts
|—— app.module.ts
|—— assets/
|—— environments/
|—— environment.prod.ts|ts
|—— favicon.ico
|—— index.html
|—— main.ts
|—— polyfills.ts
|—— styles.css
|—— test.ts
|—— tsconfig.app.json
|—— tsconfig.spec.json
|—— typings.d.ts
// overall configuration
|- .angular-cli.json // the main configuration file
|- .editorconfig // editorconfig which is used in some VS Code setups
|- .gitignore
|- karma.conf.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json
|- tslint.json

Відкрийте файл package.json і оновіть залежності Angular до версії 4.3.6. Розділи dependencies і devDependencies повинні виглядати так:

«dependencies»: {
«@angular/animations»: «^4.3.6»,
«@angular/common»: «^4.3.6»,
«@angular/compiler»: «^4.3.6»,
«@angular/core»: «^4.3.6»,
«@angular/forms»: «^4.3.6»,
«@angular/http»: «^4.3.6»,
«@angular/platform-browser»: «^4.3.6»,
«@angular/platform-browser-dynamic»: «^4.3.6»,
«@angular/router»: «^4.3.6»,
«core-js»: «^2.4.1»,
«rxjs»: «^5.4.2»,
«zone.js»: «^0.8.14»
},
«devDependencies»: {
«@angular/cli»: «1.3.2»,
«@angular/compiler-cli»: «^4.3.6»,
«@angular/language-service»: «^4.3.6»,
«@types/jasmine»: «~2.5.53»,
«@types/jasminewd2»: «~2.0.2»,
«@types/node»: «~6.0.60»,
«codelyzer»: «~3.1.1»,
«jasmine-core»: «~2.6.2»,
«jasmine-spec-reporter»: «~4.1.0»,
«karma»: «~1.7.0»,
«karma-chrome-launcher»: «~2.1.1»,
«karma-cli»: «~1.0.1»,
«karma-coverage-istanbul-reporter»: «^1.2.1»,
«karma-jasmine»: «~1.1.0»,
«karma-jasmine-html-reporter»: «^0.2.2»,
«protractor»: «~5.1.2»,
«ts-node»: «~3.2.0»,
«tslint»: «~5.3.2»,
«typescript»: «~2.3.3»
}

В папці проекту запустіть

npm install

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

ng serve

Використання нового модуля HttpClient в Angular 4

Веб-сервер розробника запуститься на http://localhost:4200. Відкрийте цей адерс, перед вам буде наступна сторінка.

Використання нового модуля HttpClient в Angular 4

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

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

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 в компонентах, його необхідно вставити в конструктор класу. Імпортуйте HttpClient у src/app/app.component.ts, далі вставте його в конструктор, ось так:

import { Component } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
constructor( private http: HttpClient ) { //dependency injection, creating an instance of HttpClient called http
}
}

Тепер ви можете виконувати 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 працюють приблизно так само.

Відредагуйте src/app/app.component.ts:

import { Component, OnInit } from ‘@angular/core’; // importing the interface OnInit
import { HttpClient } from ‘@angular/common/http’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent implements OnInit { // implementing OnInit
title = ‘app’;
constructor( private http: HttpClient ) {
}
ngOnInit(): void { // adding the lifecycle hook ngOnInit
this.http.get(‘http://jsonplaceholder.typicode.com/posts’).subscribe(data => {
console.log(data); // using the HttpClient instance, http to call the API then subscribe to the data and display to console
});
}
}

Ми викликаємо API endpoint у хука життєвого циклу ngOnInit. Хук виконується при ініціалізації компонента. Спочатку імпортується інтерфейс OnInit. Потім цей інтерфейс реалізується у визначенні класу. Далі ми викликаємо метод ngOnInit, всередині якого ми викликаємо HttpClient об’єкт http, який ми раніше створили в конструкторі.

Ми викликаємо метод get об’єкта, який очікує URL потрібного нам API endpoint. Метод get повертає вами. Щоб отримувати повідомлення про надходження відповіді, на цей вами необхідно підписатися. Це робиться через метод subscribe. У методі subscribe ми задаємо обробник події, яка отримує дані, які потім можна роздрукувати в консоль. Висновок консолі в браузері:

Використання нового модуля HttpClient в Angular 4

Це json об’єкти, отримані з http://jsonplaceholder.typicode.com/posts.

Щоб отримати доступ до будь-якого властивості об’єкта відповіді, наприклад data.userId, необхідно кинути об’єкт відповіді тип, що містить відповідні властивості. Для цього необхідно визначити інтерфейс. Вставте наступний код у файл src/app/app.component.ts після импортов.

interface DataResponse {
userId: string;
id: string;
title: string;
}

Потім відредагуйте виклик get під інтерфейс DataResponse:

this.http.get(‘http://jsonplaceholder.typicode.com/posts/1’).subscribe(data => {
console.log(‘UserId:’ + data.userId);
console.log(‘Id:’ + data.id);
console.log(‘Title:’ + data.title);
console.log(‘Body:’ + data.body);
});

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

Використання нового модуля HttpClient в Angular 4

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

import { HttpClient, HttpErrorResponse } from ‘@angular/common/http’;
// …
this.http.get(‘https://jsonplaceholder.typicode.com/posts/1’).subscribe(data => {
console.log(‘UserId:’ + data.userId);
console.log(‘Id:’ + data.id);
console.log(‘Title:’ + data.title);
console.log(‘Body:’ + data.body);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log(‘Client-side error occured.’);
} else {
console.log(‘Server-side error occured.’);
}
}
);

HTTP POST

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

this.http.post(‘http://jsonplaceholder.typicode.com/posts’, {
title: ‘foo’,
body: ‘bar’,
userId: 1
})
.subscribe(
res => {
console.log(res);
},
err => {
console.log(‘Error occured’);
}
);

Метод post повертає вами, тому на нього потрібно підписатися, як і раніше. Це робиться викликом методу 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 з наступним кодом:

import { Injectable } from ‘@angular/core’;
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from ‘@angular/common/http’;
import { Вами } from ‘rxjs/вами’;
@Injectable()
export class TypicodeInterceptor implements HttpInterceptor {
intercept (req: HttpRequest, next: HttpHandler): Вами {
const authReq = req.clone({
headers: req.headers.set(‘Accept-Language’, ‘Test’)
});
return next.handle(authReq);
}
}

Спочатку ми імпортуємо injectable з @angular/core. Далі ми імпортуємо HttpEvent, HttpInterceptor, HttpHandler з @angular/common/http. Пакет Вами імпортується з rxjs/вами.

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

Метод приймає запит, змінює його перед подальшою відправкою в додатку. Тому ми передаємо два параметри цей метод: сам запит типу HttpRequest і параметр next типу HttpHandler. Метод повертає вами типу HttpEvent.

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

Новостворений об’єкт запиту (з заголовком) передається для подальшої обробки метод next.handle.

Провайдер перехоплювачів

Щоб в нашому додатку заробили перехоплювачі, необхідно відредагувати файл src/app/app.module.ts.

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { HttpClientModule } from ‘@angular/common/http’;
import { HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { AppComponent } from ‘./app.component’;
import { TypicodeInterceptor } from ‘./typicode.interceptor’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: TypicodeInterceptor,
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule { }

Ми імпортували 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. Всі запитання залишайте у коментарях.