- •Билет 1
- •Билет 2
- •Структура приложения¶
- •Модуль¶
- •Компонент¶
- •Сервис¶
- •Директива¶
- •Билет 3
- •Билет 4
- •Билет 5
- •Билет 6
- •Билет 7
- •Билет 8
- •Билет 9
- •Билет 10
- •Привязка к сеттеру
- •Билет 12
- •Билет 13
- •Билет 14
- •Билет 15
- •Билет 16
- •Корневой уровень
- •Уровень модуля
- •Уровень компонента
- •Билет17 Не то
- •Билет 18
- •Билет 19
- •Билет 20
- •Билет 21
- •Билет 22
- •Билет 23
- •Билет 24
- •Заключение
- •Билет 25
- •Билет 26
- •Билет 27
- •Билет 28
- •Билет 29
- •Билет 30
Билет 20
Для чего применяется HttpClient. Опишите принцип работы класса.
Практически любое клиентское приложение получает данные от удаленного сервера. Большинство современных API основаны на протоколе HTTP, поэтому "общение" с сервером Angular осуществляет через REST-подобные запросы. За это отвечает HttpClientModule.
После в компонент или сервис (в зависимости от построения архитектуры) импортируется сервис HttpClient.
(untitled)
@Injectable()
export class DataService{
constructor(private http:HttpClient){}...
}
В архитектуре REST API в зависимости от назначения используются разные методы HTTP запросов. Основные - GET, POST, PUT и DELETE. Рассмотрим, как сделать средствами Angular HTTP запросы.
Все методы сервиса HttpClient возвращают тип Observable. Это означает, что если при вызове метода, который должен сделать HTTP-запрос, не вызвать метод subscribe(), то ничего не произойдет. Методу subscribe() можно передавать две функции-обработчика, первая выполнится в случае успешного ответа от сервера, вторая - в случае ошибки.
Пример Angular GET-запросов.
(untitled)
//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, который предварительно импортируется.
(untitled)
import {HttpParams} from "@angular/common/http";
Передача значений осуществляется с помощью set(). Для передачи множества параметров используется следующая запись.
(untitled)
params: new HttpParams()
.set(`id`, id)
.set(`category`, category)
Пример Angular POST-запроса.
(untitled)
//POST-запрос на создание нового счета
createAccount(){
return this.http.post(`http://example.com/api/accounts`,{
name:`Default account name`,
type:1,
});
}
Метод post() принимает три аргумента. Второй - тело запроса, третьим параметром можно передаваться конфигурация.
Пример Angular PUT-запроса
(untitled)
//PUT-запрос на создание нового счета
updateAccount(){
return this.http.put(`http://example.com/api/accounts`,{
name:`Updated account name`,
id:3,
});
}
Метод put() во всем идентичен методу post().Разница между ними состоит в том, что post() используется для создания новой записи, а put() - для ее обновления.
Пример Angular DELETE-запроса.
(untitled)
//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 (по умолчанию).