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.
¿Te está gustando esta lección?
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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
- Interceptores: Angular proporciona interceptores HTTP para modificar solicitudes y respuestas globalmente. Son útiles para agregar tokens de autenticación, manejar errores, etc.
- Testing: Angular proporciona
HttpClientTestingModule
para facilitar las pruebas de servicios que usanHttpClient
. - Cancelación de solicitudes: Se pueden usar
AbortController
yAbortSignal
para cancelar solicitudes en curso. - Manejo de errores: Se recomienda el uso de
catchError
de RxJS para manejar errores de manera más robusta. - Caché: Angular no proporciona una solución de caché incorporada, pero se pueden implementar estrategias de caché utilizando RxJS operators como
shareReplay()
.
Aprendizajes de esta lección
- Configurar
HttpClientModule
en una aplicación Angular. - Inyectar
HttpClient
en componentes y servicios. - Realizar solicitudes HTTP GET, POST, PUT/PATCH, DELETE.
- Manejar respuestas de solicitudes HTTP.
- Implementar etapas de mejor práctica como interceptores, testing y cancelación de solicitudes.
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs