Tutorial Angular: 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 es parte del módulo HttpClientModule que se incluye en la librería @angular/common/http.

Configuración inicial

Primero, es necesario importar el módulo HttpClientModule en el módulo de la aplicación (app.module.ts) para que HttpClient esté disponible en toda la aplicación.

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

@NgModule({
  imports: [
    // otros módulos
    HttpClientModule
  ],
  // ...
})
export class AppModule { }

Configuración en aplicaciones Angular sin módulo raíz

A partir de Angular 14, se introdujo la posibilidad de crear aplicaciones sin un módulo raíz, utilizando un enfoque basado en componentes autónomos (standalone components). En este caso, la configuración de HttpClient es ligeramente diferente:

Importación en el componente principal: En lugar de importar HttpClientModule en un módulo raíz, se importa directamente en el componente principal de la aplicación:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HttpClientModule],
  template: '...'
})
export class AppComponent { }

Configuración en main.ts: Alternativamente, se puede configurar HttpClient a nivel de aplicación en el archivo main.ts:

import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule)
  ]
}).catch(err => console.error(err));

Uso en componentes y servicios: Una vez configurado, HttpClient se puede usar en componentes y servicios de la misma manera que en las aplicaciones basadas en módulos.

Este enfoque sin módulo raíz simplifica la estructura de la aplicación y puede llevar a un mejor rendimiento en aplicaciones más grandes. Sin embargo, es importante tener en cuenta que algunas librerías de terceros pueden aún no ser compatibles con este nuevo enfoque, por lo que se debe verificar la compatibilidad al elegir esta estructura.

Inyección de dependencias

Una vez importado el módulo, se puede inyectar HttpClient en los componentes o servicios de Angular.

Aquí un ejemplo en un servicio de Angular:

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

@Injectable({
    providedIn: 'root'
})
export class MiServicioService {

    constructor(private http: 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 } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface Data {
  message: string;
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: 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 } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-data',
  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 {
  comments$: Observable<any[]> | undefined;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.comments$ = this.dataService.fetchComments();
  }
}

El servicio podría verse así:

import { HttpClient } from '@angular/common/http';
import { Injectable } 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 apiUrl = 'https://jsonplaceholder.typicode.com/comments'; // Ejemplo de URL, ajusta según tu API real

  constructor(private http: HttpClient) { }

  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 } 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 {
  constructor(private http: 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 } 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 {
  constructor(private http: 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 } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  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 } 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 {
  constructor(private http: 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 } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServicioService {

  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

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

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  data: any;

  constructor(private servicioService: ServicioService) {}

  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 }}
}

Nuevas características y mejores prácticas

1. Interceptores: Angular proporciona interceptores HTTP para modificar solicitudes y respuestas globalmente. Son útiles para agregar tokens de autenticación, manejar errores, etc.
2. Testing: Angular proporciona HttpClientTestingModule para facilitar las pruebas de servicios que usan HttpClient.
3. Cancelación de solicitudes: Se pueden usar AbortController y AbortSignal para cancelar solicitudes en curso.
4. Manejo de errores: Se recomienda el uso de catchError de RxJS para manejar errores de manera más robusta.
5. Caché: Angular no proporciona una solución de caché incorporada, pero se pueden implementar estrategias de caché utilizando RxJS operators como shareReplay().