HttpClient и отправка запросов

Для взаимодействия с сервером и отправки запросов по протоколу HTTP применяется класс HttpClient. Этот класс определяет ряд методов для отправки различного рода запросов: GET, POST, PUT, DELETE. Данный класс построен поверх стандартного объекта в JavaScript — XMLHttpRequest.

Для использования этого класса в проект необходимо установить пакет @angular/common:

{
    "name": "helloapp",
    "version": "1.0.0",
    "description": "First Angular 7 Project",
    "author": "Eugene Popov <metanit.com>",
    "scripts": {
        "dev": "webpack-dev-server --hot --open",
        "build": "webpack"
    },
    "dependencies": {
        "@angular/common": "~7.0.0"
        // остальные пакеты
    },
    "devDependencies": {
        // остальные пакеты
    }
}

И также в файле модуля AppModule должен быть импортирован класс HttpClientModule из пакета @angular/common/http:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

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

Стоит отметить, что в предыдущих версиях Angular (2,4) использовался для взаимодействия с сетью тип HttpModule из пакета @angular/http. Начиная с версии Angular 5 тип HttpModule и вообще пакет @angular/http являются устаревшими, поэтому рекомендуется применять именно классы HttpClient и HttpClientModule, которые собственно и используются в данном руководстве.

Вначале рассмотрим выполнение простейших GET-запросов. Пусть у нас есть стандартная структура проекта:

В корневую папку проекта добавим файл user.json, который будет представлять данные:

{
    "name": "Bob",
    "age": 28
}

Для представления данных в папку src/app добавим новый файл user.ts и определим в нем следующий код:

export class User {
    name: string;
    age: number;
}

Для оправки запроса определим в компоненте AppComponent следуюший код:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <p>Имя пользователя: {{ user?.name }}</p>
            <p>Возраст пользователя: {{ user?.age }}</p>
        </div>
    `,
})
export class AppComponent implements OnInit {
    user: User;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.http
            .get('user.json')
            .subscribe((data: User) => (this.user = data));
    }
}

В данном случае в шаблоне выводятся данные объекта User, которые мы хотим получить с сервера. Однако загрузка данных, скажем, в конструкторе компонента не очень желательна. В этом плане метод ngOnInit(), который определен в интерфейсе OnInit и который вызывается при инициализации компонента представляет более предпочтительное место для загрузки данных. В конструкторе же мы просто получаем сервис HttpClient.

Далее в методе ngOnInit() получаем данные из сервиса. Сам метод http.get() возвращает объект Observable<any>. Observable представляет своего рода поток, и для прослушивания событий из этого потока применяется метод subscribe. Этот метод определяет действие над результатом запроса — полученными с сервера данными. В данном случае действие определено в виде стрелочной функции. Причем поскольку между схемой класса User и данными из файла json есть прямое сопоставление, то получаемые данные мы можем определить как объект User, и присвоить их переменной данного класса:

(data: User) => (this.user = data);

В итоге при запуске веб-страницы мы увидим загруженные данные из файла user.json.

Создание сервиса

При взаимодействии с сервером, как правило, обращения к серверу происходят не непосредственно из компонента, а из вспомогательных сервисов. Поскольку сервис может определять дополнительную логику обработки полученных с сервера данных, которую могли бы сделать код компонента перегруженным. Кроме того, сервисы могут определять функционал, который будет использоваться несколькими компонентами. Компоненты же выступают в качестве потребителей данных, которые получены от сервисов.

Поэтому для работы с http добавим в папку src/app новый файл http.service.ts со следующим содержимым:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class HttpService {
    constructor(private http: HttpClient) {}

    getData() {
        return this.http.get('user.json');
    }
}

Для отправки запросов сервис получает объект HttpClient. Чтобы данный сервис также могли использовать и другие компонетны через механизм dependency injection, к классу применяется декоратор @Injectable.

Для выполнения get-запроса у объекта HttpClient вызывается метод get(), в который передается адрес запроса — в нашем случае json-файл с данными.

В итоге структура проекта будет выглядеть следующим образом:

Теперь используем этот сервис в компоненте AppComponent:

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { User } from './user';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <p>Имя пользователя: {{ user?.name }}</p>
            <p>Возраст пользователя: {{ user?.age }}</p>
        </div>
    `,
    providers: [HttpService],
})
export class AppComponent implements OnInit {
    user: User;

    constructor(private httpService: HttpService) {}

    ngOnInit() {
        this.httpService
            .getData()
            .subscribe((data: User) => (this.user = data));
    }
}

Загрузка сложных данных

В примерах выше определение json-файла соответствует определению класса User, поэтому простое присвоение this.user=data пройдет успешно. И подобным образом мы можем загружать и другие более сложные данные. Например, определим в корневой папке проекта файл users.json:

{
    "userList": [
        {
            "name": "Bob",
            "age": 28
        },
        {
            "name": "Tom",
            "age": 45
        },
        {
            "name": "Alice",
            "age": 32
        }
    ]
}

Изменим в классе HttpService адрес загрузки данных:

getData(){
        return this.http.get('users.json')
}

И изменим код компонента:

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { User } from './user';

@Component({
    selector: 'my-app',
    template: `
        <ul>
            <li *ngFor="let user of users">
                <p>Имя пользователя: {{ user?.name }}</p>
                <p>Возраст пользователя: {{ user?.age }}</p>
            </li>
        </ul>
    `,
    providers: [HttpService],
})
export class AppComponent implements OnInit {
    users: User[] = [];

    constructor(private httpService: HttpService) {}

    ngOnInit() {
        this.httpService
            .getData()
            .subscribe(
                (data) => (this.users = data['userList'])
            );
    }
}

В данном случае мы хотим получить массив объектов User. Но напрямую данные из users.json не соответствуют массиву. Массив в файле определен по ключу userList. Поэтому, используя данный ключ, мы достаем нужные данные из ответа сервера: this.users=data["userList"].

Комментарии