Angular 4.3 HttpClient (отримання доступу до REST Web Services через Angular)

Від автора: в Angular 4.3 представлений новий модуль HttpClientModule. Він доступний в пакеті @angular/common/http і повторно реалізує старий HttpModule. У HttpClientModule включений новий сервіс HttpClient. З його допомогою можна посилати HTTP-запити і обробляти відповіді усередині додатку. Давайте розглянемо, як використовувати в цій версії Angular HttpClient.

Створення нового проекту Angular 4.3

Спочатку необхідно створити новий проект Angular 4.3. Найлегше це зробити через Angular CLI (командний рядок Angular). Якщо у вас ще не встановлений Angular CLI, спочатку виконайте наступну команду для встановлення останньої версії:

$ npm install -g @angular/cli@latest

Створиться нова папка nghttp01, в яку завантажиться шаблон проекту і автоматично встановляться залежності. Потім відкрийте package.json в улюбленому редакторі і подивіться, щоб всі залежно Angular містили версію < 4.3.0. Після оновлення package.json необхідно виконати наступну команду

$ npm install

в папці проекту, щоб оновити відповідні пакети.

Робимо HttpClient доступним в проекті

Щоб використовувати HttpClient всередині компонентів, спочатку необхідно підключити HttpClientModule в додаток Angular. Насамперед необхідно імпортувати модуль HttpClient в кореневій модуль програми у файл 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’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Після імпорту HttpClient можна використовувати в компонентах. Щоб HttpClient став доступний в класі компонента, необхідно вставити його в конструктор класу, як показано нижче:

import { Component, OnInit } 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){
}
}

HttpClient буде використовувати браузерний API XMLHttpRequest для виконання HTTP-запитів. Виконати запит HTTP певного типу можна з допомогою методів, що відповідають HTTP дієслів: get, post, put, delete, patch, head, jsonp.

Запит даних через HttpClient

Давайте напишемо простий приклад, який з допомогою REST API з GitHub запитує дані користувача. Вставте наступний код в app.component.ts:

import { Component, OnInit } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent implements OnInit {
title = ‘app’;
results = “;
constructor(private http: HttpClient){
}
ngOnInit(): void {
this.http.get(‘https://api.github.com/users/seeschweiler’).subscribe(data => {
console.log(data);
});
}
}

В консолі браузера повинно відобразитися приблизно наступне:

Результат показує, що в JSON відповідь можна звертатися безпосередньо за допомогою підписки на Вами, який повертається методом get.

Типізований відповідь

З консолі браузера видно, що у повернутого JSON об’єкта багато властивостей. Якщо спробувати отримати доступ до одного з них за допомогою точки, ви отримаєте помилку:

console.log(data.login);

Помилка свідчить «властивість login не існує типу Object. Дані мають тип Object, тому до властивостей можна звертатися безпосередньо. Однак ми можемо віднести відповідь Object до типу, який містить відповідні властивості. Давайте визначимо тип інтерфейсу, який містить властивості відповіді:

interface UserResponse {
login: string;
bio: string;
company: string;
}

Тепер з допомогою UserResponse давайте віднесемо повертається тип дзвінка get:

this.http.get(‘https://api.github.com/users/seeschweiler’).subscribe(data => {
console.log(“User Login:” + data.login);
console.log(“Bio:” + data.bio);
console.log(“Company:” + data.company);
});

Тепер дані можна отримати через data.login, data.bio і data.company. В консолі браузера тепер повинен бути результат:

Обробка помилок

HTTP-запит може завершитися невдачею. На його відправку може вплинути слабке з’єднання або інші фактори, які не можна передбачити. Тому завжди необхідно писати обробники помилок. Для цього можна додати другий колбек-метод до методу subscribe:

this.http.get(‘https://api.github.com/users/seeschweiler’).subscribe(
data => {
console.log(“User Login:” + data.login);
console.log(“Bio:” + data.bio);
console.log(“Company:” + data.company);
},
err => {
console.log(“Error occured.”)
}
);

Помилково можна отримати певну інформацію, якщо вказати параметр типу HttpErrorResponse для функції-обробника помилок. HttpErrorResponse необхідно імпортувати з @angular/common/http:

this.http.get(‘https://api.github.com/users/seeschweiler’).subscribe(
data => {
console.log(“User Login:” + data.login);
console.log(“Bio:” + data.bio);
console.log(“Company:” + data.company);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log(“Client-side error occured.”);
} else {
console.log(“Server-side error occured.”);
}
}
);

Надсилання даних через HttpClient

Тепер давайте подивимося, як відправляти дані через HttpClient. Для цього ми будемо використовувати метод post об’єкта HttpClient. Звичайно, нам потрібен backend, що пропонує REST API, який приймає POST HTTP запити. Щоб не ставити свій backend API, ми можемо використовувати JSONPlaceholder – помилковий онлайн REST API для тестування і прототипування.
(https://jsonplaceholder.typicode.com/)

Endpoint http://jsonplaceholder.typicode.com/posts підтримує POST HTTP-запити. Давайте з допомогою endpoint створимо нову post запис:

const req = 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 запиту передаються у метод post в якості другого параметра у форматі JSON. Повертаємо відповідь, щоб перевірити, чи створився об’єкт:

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

Одна з нових функцій нового модуля HttpClient – доступність перехоплювачів. Перехоплювачі знаходяться між вашою програмою і backend. З допомогою перехоплювачів можна трансформувати запит від програми до його прийняття на backend. Те ж саме стосується відповідей. Якщо з backend прилітає відповідь, перехоплювач може трансформувати його перед отриманням його в додатку.

Краще всього зрозуміти перехоплювачі можна на простому прикладі. Створіть новий файл githubauth.interceptor.ts і вставте в нього наступний код:

import { Injectable } from ‘@angular/core’;
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from ‘@angular/common/http’;
import { Вами } from ‘rxjs/вами’;
@Injectable()
export class GithubAuthInterceptor implements HttpInterceptor {
intercept (req: HttpRequest, next: HttpHandler): Вами {
return next.handle(req);
}
}

Клас перехоплювача GithubAuthInterceptor реалізує інтерфейс HttpInterceptor, який входить в бібліотеку @angular/common/http. Реалізація інтерфейсу зобов’язує нам додати метод intercept в клас. Цей метод виконує основну роботу перехоплювача. В метод передається два параметри. Перший – сам запит. Другий – наступний обробник HTTP, який необхідно передати запит для подальшої обробки.

У першому прикладі метод intercept просто передає запит до наступного обробник. Зрозумівши підхід перехоплювача, ми можемо перейти до маніпулювання запитом в методі intercept:

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

Спочатку ми створюємо новий запит за допомогою методу clone. У той же час ми передаємо JSON об’єкт з властивостями заголовків. Для створення заголовка використовуємо метод req.headers.set властивості Authorization. З допомогою цієї властивості відправляється токен доступу GitHub.

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

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

Щоб активувати перехоплювач в додатку, його необхідно надати головному модулю програми AppModule у файлі 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 { GithubAuthInterceptor } from ‘./githubauth.interceptor’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: GithubAuthInterceptor,
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule { }

Спершу ми імпортуємо GithubAuthInterceptor, після чого вставляємо новий об’єкт у масив, який призначається властивості провайдера @NgModule. Цей об’єкт містить три властивості:

Перехоплювач активний, заголовок Authorization доданий у всі запити і надсилається автоматично.