HttpClient en servicios de Angular

El HttpClient es un servicio incorporado en Angular que se utiliza para realizar solicitudes HTTP como GET, POST, PUT, DELETE, etc. Ofrece una manera sencilla de interactuar con APIs web y otros recursos a través de HTTP.

Este servicio se configura mediante provideHttpClient() en la configuración de la aplicación.

flowchart TD
    PROV["provideHttpClient() en app.config.ts"] --> HC["HttpClient inyectable"]
    HC --> GET["http.get(): Observable"]
    HC --> POST["http.post()"]
    HC --> PUT["http.put() / patch()"]
    HC --> DELETE["http.delete()"]
    GET --> RXJS["RxJS: map, catchError, retry"]
    RXJS --> SIG["toSignal(): conversión a Signal"]
    PROV --> INTERC["withInterceptors: interceptores funcionales"]

Configuración inicial

En Angular 21, la forma recomendada de configurar HttpClient es usando provideHttpClient() en el archivo app.config.ts:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

Y en main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Nota: En versiones anteriores de Angular se usaba HttpClientModule importado en un @NgModule. En Angular 21, con la arquitectura standalone por defecto, se utiliza provideHttpClient() como función provider.

Inyección de dependencias

Una vez configurado provideHttpClient(), se puede inyectar HttpClient en los servicios de Angular usando la función inject():

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

@Injectable({
  providedIn: 'root'
})
export class MiServicioService {
  private http = inject(HttpClient);
}

Solicitudes HTTP

El HttpClient ofrece métodos para realizar diferentes tipos de solicitudes HTTP, como GET, POST, PUT, DELETE, etc. Estos métodos devuelven observables que pueden ser suscritos para manejar las respuestas.

Ejemplo de cómo realizar una solicitud GET

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface Data {
  message: string;
}

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

  fetchData(): Observable<Data> {
    return this.http.get<Data>('https://api.example.com/data');
  }
}

En este ejemplo, se utiliza el método get() de HttpClient para realizar una solicitud GET a la URL https://api.example.com/data.

El método devuelve un observable que puede ser suscrito desde otros componentes o servicios para obtener la respuesta de la solicitud.

Manejo de respuestas

Las respuestas de las solicitudes HTTP son observables que emiten eventos a medida que se recibe la información.

Los observables permiten manejar la respuesta de manera asíncrona y reaccionar a los cambios en los datos.

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-data',
  imports: [AsyncPipe],
  template: `
    @if (comments$ | async; as comments) {
      <h2>Comentarios:</h2>
      <ul>
        @for (comment of comments; track comment.id) {
          <li>
            <strong>ID: {{comment.id}}</strong> - {{comment.body}}
          </li>
        }
      </ul>
    }
  `
})
export class DataComponent {
  private dataService = inject(DataService);
  comments$ = this.dataService.fetchComments();
}

El servicio podría verse así:

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';

interface Comment {
  postId: number;
  id: string;
  name: string;
  email: string;
  body: string;
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private http = inject(HttpClient);
  private apiUrl = 'https://jsonplaceholder.typicode.com/comments';

  fetchComments(): Observable<Comment[]> {
    return this.http.get<Comment[]>(this.apiUrl);
  }
}

Enviar datos en solicitudes

El HttpClient también permite enviar datos en el cuerpo de las solicitudes, como en el caso de solicitudes POST o PUT/PATCH.

import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

interface Resource {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private http = inject(HttpClient);

  createResource(data: Omit<Resource, 'id'>): Observable<Resource> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<Resource>('https://api.example.com/resource', data, { headers });
  }
}

En este ejemplo, se utiliza el método post() de HttpClient para realizar una solicitud POST a la URL https://api.example.com/resource.

El método recibe los datos a enviar en el cuerpo de la solicitud y un objeto de opciones que incluye los encabezados de la solicitud.

import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

interface Resource {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private http = inject(HttpClient);

  updateResource(id: number, data: Partial<Resource>): Observable<Resource> {
    return this.http.put<Resource>(`https://api.example.com/resource/${id}`, data);
  }
}

En el ejemplo anterior se utiliza el método put() de HttpClient para enviar la solicitud PUT.

El método put() devuelve un observable que representa la respuesta de la solicitud.

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PatchService {
  private http = inject(HttpClient);
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  updatePostPartially(id: number, partialUpdate: any): Observable<any> {
    return this.http.patch(`${this.apiUrl}/${id}`, partialUpdate);
  }
}

En este ejemplo, se utiliza el método patch() de HttpClient para realizar una solicitud PATCH.

El método PATCH se usa para actualizar parcialmente un recurso existente. A diferencia de PUT, que generalmente reemplaza todo el recurso, PATCH aplica modificaciones solo a los campos especificados en la solicitud.

El parámetro partialUpdate es de tipo Partial<Resource>, lo que significa que puede contener cualquier subconjunto de propiedades de Resource. Esto es ideal para PATCH, ya que permite enviar solo los campos que necesitan ser actualizados.

Eliminar datos en solicitudes

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface Resource {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private http = inject(HttpClient);

  deleteResource(id: number): Observable<void> {
    return this.http.delete<void>(`https://api.example.com/resource/${id}`);
  }
}

En este ejemplo, el servicio ApiService contiene un método llamado deleteResource(id: number) que realiza una solicitud HTTP DELETE a una URL específica para eliminar un recurso identificado por su id.

Esta función retorna un observable que refleja la respuesta obtenida como resultado de dicha solicitud.

Ejemplo completo de implementación

     1.- Inyecta HttpClient en el constructor del servicio para realizar solicitudes HTTP:

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServicioService {
  private http = inject(HttpClient);
  private apiUrl = 'https://api.example.com/data';

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

     2.- Inyecta y llama al servicio en uno de tus componentes:

import { Component, OnInit, inject } from '@angular/core';
import { ServicioService } from './servicio.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  private servicioService = inject(ServicioService);
  data: any;

  ngOnInit() {
    this.servicioService.getData().subscribe(response => {
      this.data = response;
    });
  }
}

     3.- Luego, en el archivo app.component.html, muestra los datos obtenidos:

@if (data) {
  {{ data | json }}
}

Mejores practicas en Angular 21

1. Configuración: Usar provideHttpClient() en app.config.ts en lugar de HttpClientModule (que se usaba en versiones anteriores con NgModule).
2. Inyección: Usar inject(HttpClient) en lugar de inyección por constructor.
3. Interceptores funcionales: Usar HttpInterceptorFn con withInterceptors() para interceptores funcionales en lugar de interceptores basados en clases.
4. Manejo de errores: Se recomienda el uso de catchError de RxJS para manejar errores de manera robusta.
5. toSignal(): Para consumir observables HTTP como signals en el template, se puede usar toSignal() de @angular/core/rxjs-interop:

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-datos',
  template: `
    @if (datos()) {
      <pre>{{ datos() | json }}</pre>
    }
  `
})
export class DatosComponent {
  private http = inject(HttpClient);
  datos = toSignal(this.http.get('/api/datos'));
}

6. Cache: Se pueden implementar estrategias de cache utilizando RxJS operators como shareReplay().