HttpClient

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

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

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

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

Все методы сервиса HttpClient возвращают тип Observable. Это означает, что если при вызове метода, который должен сделать HTTP-запрос, не вызвать метод subscribe(), то ничего не произойдет. Методу subscribe() можно передавать две функции-обработчика, первая выполнится в случае успешного ответа от сервера, вторая - в случае ошибки.

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

//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, который предварительно импортируется.

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

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

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

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

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

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

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

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

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

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

//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.

@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

Комментарии