Как подключить HTTP-запросы с помощью HttpClient?
В Angular для работы с HTTP-запросами используется встроенный сервис HttpClient, который предоставляется модулем HttpClientModule из пакета @angular/common/http. HttpClient построен на основе RxJS и возвращает Observable, что позволяет легко обрабатывать асинхронные запросы, использовать операторную цепочку, обрабатывать ошибки, отменять запросы и реализовывать реактивное поведение.
1. Подключение HttpClientModule
Перед использованием HttpClient, необходимо импортировать модуль HttpClientModule в корневом или функциональном модуле приложения:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: \[
HttpClientModule
\]
})
export class AppModule {}
Это регистрирует провайдер HttpClient, делая его доступным для внедрения во всём приложении.
2. Внедрение HttpClient в компонент или сервис
Сервис HttpClient внедряется через конструктор:
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
Рекомендуется инкапсулировать всю работу с HTTP в отдельный сервис:
@Injectable({ providedIn: 'root' })
export class ApiService {
constructor(private http: HttpClient) {}
getUsers() {
return this.http.get<User\[\]>('/api/users');
}
}
3. Методы HttpClient
| Метод | Назначение |
|---|---|
| get<T>() | Получить данные |
| --- | --- |
| post<T>() | Отправить данные (создание) |
| --- | --- |
| put<T>() | Полное обновление |
| --- | --- |
| patch<T>() | Частичное обновление |
| --- | --- |
| delete<T>() | Удаление данных |
| --- | --- |
| request<T>() | Универсальный метод запроса |
| --- | --- |
Все методы возвращают Observable<T>, что позволяет применять операторную обработку и подписку.
4. Примеры базовых запросов
GET-запрос:
this.http.get<User\[\]>('/api/users')
.subscribe(users => console.log(users));
POST-запрос:
this.http.post('/api/users', { name: 'Alex' })
.subscribe(response => console.log(response));
PUT-запрос:
this.http.put('/api/users/1', { name: 'Updated' })
.subscribe(result => console.log(result));
DELETE-запрос:
this.http.delete('/api/users/1')
.subscribe(() => console.log('Deleted'));
5. Типизация ответов
Указывайте тип результата в дженериках:
this.http.get<User\[\]>('/api/users')
.subscribe((data: User\[\]) => console.log(data));
6. Передача параметров и заголовков
Параметры запроса:
import { HttpParams } from '@angular/common/http';
const params = new HttpParams()
.set('page', '1')
.set('limit', '10');
this.http.get('/api/items', { params }).subscribe();
Заголовки:
import { HttpHeaders } from '@angular/common/http';
const headers = new HttpHeaders({
'Authorization': 'Bearer token',
'Custom-Header': 'value'
});
this.http.get('/api/data', { headers }).subscribe();
7. Обработка ошибок
Обработка ошибок делается с помощью оператора catchError:
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
this.http.get('/api/fail')
.pipe(
catchError(error => {
console.error('Ошибка:', error);
return throwError(() => error);
})
)
.subscribe();
8. Использование observe и responseType
Получение полного ответа:
this.http.get('/api/data', { observe: 'response' })
.subscribe(response => {
console.log(response.status);
console.log(response.body);
});
Получение ответа в виде text, blob, arraybuffer:
this.http.get('/api/file', { responseType: 'blob' })
.subscribe(file => download(file));
9. Интерсепторы (HttpInterceptor)
Интерсепторы позволяют перехватывать и модифицировать HTTP-запросы и ответы (добавление токенов, логгинг, глобальная обработка ошибок).
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const cloned = req.clone({
headers: req.headers.set('Authorization', 'Bearer token')
});
return next.handle(cloned);
}
}
Регистрация в providers:
providers: \[
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
\]
10. Отмена запросов
Можно отменить HTTP-запрос через unsubscribe() или использовать takeUntil():
const sub = this.http.get('/api/data').subscribe();
sub.unsubscribe(); // запрос прерывается
RxJS способ:
private destroy$ = new Subject<void>();
this.http.get('/api/data')
.pipe(takeUntil(this.destroy$))
.subscribe();
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
11. Использование async pipe с HTTP
Можно не подписываться вручную, а использовать async в шаблоне:
@Component({ template: \`<div \*ngIf="user$ | async as user">{{ user.name }}</div>\` })
export class MyComponent {
user$ = this.http.get<User>('/api/user');
}
12. Retry, delay и другие RxJS-операторы
Можно применять мощные операторы RxJS:
this.http.get('/api/data')
.pipe(
retry(3),
delay(1000),
catchError(err => of(\[\]))
)
.subscribe();
13. Интеграция с типами API
Для строгой типизации стоит создавать интерфейсы:
export interface Product {
id: number;
name: string;
price: number;
}
this.http.get<Product\[\]>('/api/products');
14. Работа с REST API и GraphQL
-
Для REST API — используются стандартные методы get, post, put, delete.
-
Для GraphQL — можно использовать post с телом-запросом GraphQL в формате строки JSON.
this.http.post('/graphql', {
query: \`{ users { id, name } }\`
});
15. Загрузка файлов через HttpClient
const formData = new FormData();
formData.append('file', fileInput.files\[0\]);
this.http.post('/api/upload', formData).subscribe();
16. Download файлов
this.http.get('/api/report', { responseType: 'blob' })
.subscribe(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
a.click();
});
17. Повторное использование конфигурации
const httpOptions = {
headers: new HttpHeaders({
'Authorization': 'Bearer token'
}),
params: new HttpParams().set('id', '123')
};
this.http.get('/api/data', httpOptions);
HttpClient — это безопасный, расширяемый, типизированный и удобный API для работы с HTTP-запросами в Angular, интегрированный с RxJS, что даёт огромную гибкость и контроль при работе с асинхронными потоками данных.