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
- выполнение запроса завершено.