Manual Completo de Angular: Comunicación con el Servidor

---

Índice

1. Introducción a la comunicación con el servidor en Angular
2. Solicitudes HTTP con HttpClient
3. Tipos de comunicaciones: GET, POST, PUT y DELETE
4. Manejo de respuestas y errores
5. Interceptor de peticiones HTTP
6. Comunicación con un servidor RESTful
7. Pruebas unitarias de comunicación con el servidor
8. Buenas prácticas en la comunicación HTTP

---

1. Introducción a la comunicación con el servidor en Angular

En las aplicaciones web modernas, interactuar con un servidor backend para obtener, enviar y manipular datos es crucial. Angular proporciona una herramienta eficiente y flexible para este propósito: el módulo HttpClient.

Ventajas del uso de HttpClient:

• API simple y poderosa para manejar solicitudes HTTP.
• Soporte nativo para observables (RxJS).
• Manejo automático de respuestas JSON.
• Configuración sencilla de interceptores para personalizar las solicitudes.

---

2. Solicitudes HTTP con HttpClient

El módulo HttpClient está disponible en @angular/common/http y debe ser importado en el módulo principal de la aplicación:

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

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

Uso de HttpClient en un servicio

Crea un servicio para manejar las solicitudes HTTP:

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private baseUrl = 'https://api.example.com';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(`${this.baseUrl}/data`);
  }
}

Este servicio utiliza el método get() de HttpClient para realizar una solicitud HTTP GET.

---

3. Tipos de Comunicaciones: GET, POST, PUT y DELETE

GET: Para obtener datos del servidor.

this.http.get<User[]>('https://api.example.com/users').subscribe(users => {
  console.log(users);
});

POST: Para enviar datos y crear nuevos recursos.

const newUser = { name: 'Jane Doe', email: 'jane@example.com' };
this.http.post<User>('https://api.example.com/users', newUser).subscribe(user => {
  console.log('Usuario creado:', user);
});

PUT: Para actualizar recursos existentes.

const updatedUser = { id: 1, name: 'Jane Smith', email: 'jane.smith@example.com' };
this.http.put<User>('https://api.example.com/users/1', updatedUser).subscribe(user => {
  console.log('Usuario actualizado:', user);
});

DELETE: Para eliminar recursos.

this.http.delete('https://api.example.com/users/1').subscribe(() => {
  console.log('Usuario eliminado');
});

---

4. Manejo de Respuestas y Errores

Manejo de Respuestas

Cuando recibimos una respuesta del servidor, utilizamos el método subscribe() para manejar los datos devueltos:

this.http.get<User>('https://api.example.com/users/1').subscribe(user => {
  console.log(user.name);
});

Manejo de Errores

El segundo argumento de subscribe() nos permite manejar errores:

this.http.get<User>('https://api.example.com/users/1').subscribe({
  next: user => console.log(user),
  error: error => console.error('Error:', error),
});

Para un manejo más avanzado, utiliza el operador catchError de RxJS:

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

this.http.get<User>('https://api.example.com/users/1')
  .pipe(
    catchError(error => {
      console.error('Error:', error);
      return throwError(error);
    })
  )
  .subscribe();

---

5. Interceptor de Peticiones HTTP

Los interceptores permiten modificar solicitudes y respuestas de manera centralizada.

Creación de un interceptor

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const clonedReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer my-token'),
    });
    return next.handle(clonedReq);
  }
}

Registro del interceptor

Agrega el interceptor en el módulo:

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

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
})
export class AppModule {}

---

6. Comunicación con un Servidor RESTful

Angular simplifica la interacción con APIs RESTful:

Obtener recursos

this.http.get<User[]>('https://api.example.com/users').subscribe(users => {
  console.log(users);
});

Crear, actualizar y eliminar recursos

Los métodos post(), put() y delete() permiten trabajar con recursos REST de manera estándar.

---

7. Pruebas Unitarias de Comunicación con el Servidor

Usa el módulo HttpClientTestingModule para simular solicitudes HTTP.

Configuración

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule],
  providers: [DataService],
});

Prueba de una solicitud GET

it('should retrieve data', () => {
  const mockData = [{ id: 1, name: 'John' }];

  dataService.getData().subscribe(data => {
    expect(data).toEqual(mockData);
  });

  const req = httpTestingController.expectOne('https://api.example.com/data');
  expect(req.request.method).toEqual('GET');
  req.flush(mockData);
});

---

8. Buenas Prácticas en la Comunicación HTTP

1. Centralizar las solicitudes HTTP: Usa servicios para gestionar la lógica de comunicación.
2. Manejar errores adecuadamente: Implementa un interceptor o usa operadores RxJS como catchError.
3. Utilizar modelos para tipado fuerte: Define interfaces para estructurar los datos recibidos del servidor.
4. Optimizar con carga diferida: Realiza solicitudes solo cuando los datos sean necesarios.
5. Seguridad: Asegúrate de enviar tokens de autenticación en los encabezados de las solicitudes.