Как создать обертку вокруг HttpClient?

В Angular, класс HttpClient предоставляет удобный способ для работы с HTTP-запросами. Однако иногда нам может потребоваться добавить дополнительные функции или логику, например, для обработки ошибок, установки заголовков или авторизации. Для этого мы можем создать обертку вокруг HttpClient, которая будет содержать нашу дополнительную логику.

Для создания обертки вокруг HttpClient в Angular применяется подход, называемый "перехватчики запроса" (request interceptors). Перехватчики запроса позволяют перехватывать и изменять HTTP-запросы и ответы.

Для начала, создадим класс-обертку, назовем его CustomHttpClient. Внутри CustomHttpClient мы будем использовать HttpClient, поэтому мы должны импортировать класс HttpClient и Inject его в конструктор CustomHttpClient:

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

export class CustomHttpClient {
  constructor(private http: HttpClient) { }
}

Затем мы можем добавить необходимые методы в класс CustomHttpClient. Допустим, мы хотим добавить заголовок Authorization к каждому запросу:

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class CustomHttpClient {
  constructor(private http: HttpClient) { }

  public get(url: string) {
    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer token'); // Здесь можно реализовать логику получения токена авторизации

    return this.http.get(url, { headers });
  }

  // Другие методы POST, PUT, DELETE и т. д.
}

В примере выше мы добавили метод get, который принимает URL и возвращает результат вызова http.get с добавленным заголовком Authorization. Мы можем добавить аналогичные методы для других HTTP-методов, таких как POST, PUT и DELETE.

После создания CustomHttpClient мы можем использовать его вместо HttpClient в нашем сервисе или компоненте. Например:

import { Injectable } from '@angular/core';
import { CustomHttpClient } from '../custom-http-client';

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

  public getData() {
    const url = 'https://api.example.com/data';
    return this.http.get(url);
  }
}

В данном примере мы импортировали CustomHttpClient и использовали его вместо HttpClient в сервисе DataService.

Также мы можем добавить дополнительные функции или логику в CustomHttpClient по нашему усмотрению. Например, можно добавить обработку ошибок или логирование.

Создание обертки вокруг HttpClient позволяет нам добавить дополнительные функции и логику к HTTP-запросам, не затрагивая непосредственно сам HttpClient. Это делает код более модульным, удобным для обслуживания и повторного использования.