HttpClient¶

Практически любое клиентское приложение получает данные от удаленного сервера. Большинство современных API основаны на протоколе HTTP, поэтому "общение" с сервером Angular осуществляет через REST-подобные запросы. За это отвечает HttpClientModule.

После в компонент или сервис (в зависимости от построения архитектуры) импортируется сервис HttpClient.

1
2
3
4

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

В архитектуре REST API в зависимости от назначения используются разные методы HTTP запросов. Основные — GET, POST, PUT и DELETE. Рассмотрим, как сделать средствами Angular HTTP запросы.

Пример Angular GET-запросов.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

//GET-запрос на получение списка счетов
getAccounts(){
    return this.http.get('http://example.com/api/accounts');
}

//GET-запрос на получение счета по id, id передается как GET-параметр
getAccountByID(id: number | string){
    return this.http.get('http://example.com/api/accounts', {
        params: new HttpParams().set('id', id)
    });
}

Для задания GET-параметров get() в качестве второго аргумента передается конфигурационный объект со свойством params. Здесь же в объекте указываются и другие параметры, например, headers, в котором задаются заголовки ответа. Все параметры подробно рассмотрены далее.

Свойство params принимает экземпляр класса HttpParams, который предварительно импортируется.

1

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

Передача значений осуществляется с помощью set(). Для передачи множества параметров используется следующая запись.

1
2
3

params: new HttpParams()
    .set(`id`, id)
    .set(`category`, category);

Пример Angular POST-запроса.

1
2
3
4
5
6
7

//POST-запрос на создание нового счета
createAccount(){
    return this.http.post(`http://example.com/api/accounts`, {
        name: `Default account name`,
        type: 1,
    });
}

Метод post() принимает три аргумента. Второй — тело запроса, третьим параметром можно передаваться конфигурация.

Пример Angular PUT-запроса

1
2
3
4
5
6
7

//PUT-запрос на создание нового счета
updateAccount(){
    return this.http.put(`http://example.com/api/accounts`, {
        name: `Updated account name`,
        id: 3,
    });
}

Метод put() во всем идентичен методу post(). Разница между ними состоит в том, что post() используется для создания новой записи, а put() — для ее обновления.

Пример Angular DELETE-запроса.

1
2
3
4
5
6

//DELETE-запрос на получение счета по id, id передается как GET-параметр
deleteAccountByID(id: number | string){
    return this.http.delete(`http://example.com/api/accounts`, {
        params: new HttpParams().set(`id`, id)
    });
}

delete() используется для удаления записи. В своем использовании он схож с GET. Оба метода не имеют тела запроса, а данные передают в строке запроса.

Теперь рассмотрим, какие свойства можно задать в конфигурации:

• headers — принимает экземпляр класса HttpHeaders, который содержит указанные с помощью метода set(key: string, value: string) HTTP-заголовки; класс HttpHeaders должен быть предварительно импортирован;
• params — принимает экземпляр класса HttpParams, который содержит указанные с помощью метода set(key: string, value: string) параметры строки запроса;
• reportProgress — указывает, необходимо ли при загрузке на сервер или скачивании с сервера данных передавать информацию о текущем состоянии; принимает либо true, либо false (по умолчанию null);
• responseType — указывает тип данных ответа ('arraybuffer' | 'blob' | 'json' | 'text'); по умолчанию 'json';
• withCredentials — указывает, будут ли в запросе передаваться авторизационные данные пользователя; принимает либо true, либо false (по умолчанию).

Для получения исчерпывающих данных о процессе выполнения запроса в его параметрах необходимо установить reportProgress в true.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

    getContactsDictionary() {
        const req = new HttpRequest(
            'GET',
            '/api/contacts/dictionary',
            {
                reportProgress: true,
                responseType: 'blob',
            }
        );

        this.http
            .request(req)
            .subscribe((event: HttpEvent<any>) => {
                switch (event.type) {
                    case HttpEventType.Sent:
                        console.log('Sent');
                        break;
                    case HttpEventType.DownloadProgress:
                        console.log(
                            `Downloading: ${
                                event.loaded / 1024
                            }Kb`
                        );
                        break;
                    case HttpEventType.Response:
                        console.log('Finished', event.body);
                }
            });
    }
}

Запросы такого рода реализуются через метод request(), а их состояние отслеживается с помощью объекта HttpEvent. В его свойстве type указывается тип текущего события (HttpTypeEvent).

Классификация HttpTypeEvent:

• Sent — запрос был отправлен;
• ResponseHeader — получены код и заголовки ответа;
• UploadProgress — событие отправки данных (для POST и PUT);
• DownloadProgress — событие скачивания данных (для GET);
• User — событие от HttpInterceptor или сервера;
• Response — выполнение запроса завершено.

Ссылки¶

• HttpClient

Комментарии