Как отправить GET-запрос на бэкенд через HttpClient?

Основы работы с HttpClient в Angular

HttpClient — это встроенный сервис Angular для выполнения HTTP-запросов. Он построен на основе RxJS Observable, что позволяет удобно работать с асинхронными данными и применять операторы для трансформации.

Настройка и импорт

Сначала необходимо импортировать HttpClientModule в корневой модуль приложения (обычно AppModule). Это делается в секции imports.

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

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule { }

Отправка GET-запроса

После настройки можно внедрить HttpClient в любой сервис или компонент через конструктор. Для отправки GET-запроса используется метод get(), который принимает URL и опциональные параметры.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

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

  getUsers() {
    return this.http.get('https://api.example.com/users');
  }
}

Обработка ответа

Метод get() возвращает Observable. Чтобы получить данные, нужно подписаться на него. В компоненте это можно сделать так:

this.dataService.getUsers().subscribe({
  next: (data) => console.log(data),
  error: (err) => console.error(err)
});

Также можно использовать async pipe в шаблоне для автоматической подписки и отписки.

Вывод

HttpClient упрощает работу с HTTP в Angular, предоставляя типизированные ответы и интеграцию с RxJS. Его стоит применять для всех сетевых запросов в Angular-приложениях, так как он обеспечивает удобную обработку ошибок, перехватчики и тестирование.