El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, aprenderemos cómo manejar errores en aplicaciones Angular, especialmente cuando trabajamos con el cliente HTTP. El manejo adecuado de errores es crucial para mejorar la experiencia del usuario y para la depuración efectiva de la aplicación.

Conceptos Clave

Errores HTTP: Errores que ocurren durante las solicitudes HTTP, como errores de red, errores del servidor, etc.
Operadores de RxJS: Herramientas que nos permiten manejar errores en flujos de datos reactivos.
Interceptors: Servicios que interceptan las solicitudes y respuestas HTTP para agregar lógica de manejo de errores.

Manejo de Errores en Solicitudes HTTP

Ejemplo Básico

Vamos a ver un ejemplo básico de cómo manejar errores en una solicitud HTTP usando el operador catchError de RxJS.

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

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

  constructor(private http: HttpClient) {}

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

  private handleError(error: HttpErrorResponse) {
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
      // Error del lado del cliente
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // Error del lado del servidor
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
  }
}

Explicación del Código

Importaciones: Importamos HttpClient, HttpErrorResponse, Observable, throwError y catchError.
Servicio: Creamos un servicio DataService que realiza una solicitud GET a una API.
Manejo de Errores: Usamos el operador catchError para interceptar errores y manejarlo con el método handleError.
Método handleError: Este método distingue entre errores del lado del cliente y del servidor, y devuelve un mensaje de error adecuado.

Ejercicio Práctico

Objetivo: Implementar el manejo de errores en una solicitud POST.

Crear un método postData en el servicio DataService.
Usar catchError para manejar errores.
Probar el método en un componente.

// data.service.ts
postData(data: any): Observable<any> {
  return this.http.post<any>(this.apiUrl, data).pipe(
    catchError(this.handleError)
  );
}

// app.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="sendData()">Send Data</button>
    <p>{{ errorMessage }}</p>
  `
})
export class AppComponent {
  errorMessage: string = '';

  constructor(private dataService: DataService) {}

  sendData() {
    this.dataService.postData({ key: 'value' }).subscribe(
      response => {
        console.log('Data sent successfully', response);
      },
      error => {
        this.errorMessage = error;
      }
    );
  }
}

Solución del Ejercicio

Método postData: Similar al método getData, pero usando http.post.
Componente: Llamamos al método postData y manejamos el error en el suscriptor.

Uso de Interceptors para Manejo Global de Errores

Los interceptores nos permiten manejar errores de manera global en toda la aplicación.

Ejemplo de Interceptor

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMessage = '';
        if (error.error instanceof ErrorEvent) {
          errorMessage = `Client-side error: ${error.error.message}`;
        } else {
          errorMessage = `Server-side error: ${error.status} ${error.message}`;
        }
        return throwError(errorMessage);
      })
    );
  }
}

Registro del Interceptor

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorInterceptor } from './error.interceptor';

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

Explicación del Código

Interceptor: Creamos un interceptor que maneja errores de solicitudes HTTP.
Registro: Registramos el interceptor en el módulo principal de la aplicación.

Conclusión

En esta sección, hemos aprendido cómo manejar errores en Angular utilizando operadores de RxJS y interceptores. El manejo adecuado de errores es esencial para crear aplicaciones robustas y fáciles de depurar. En el siguiente módulo, exploraremos la gestión de estado en Angular, lo que nos permitirá manejar datos de manera más eficiente y estructurada.

Manejo de Errores

Conceptos Clave

Manejo de Errores en Solicitudes HTTP

Ejemplo Básico

Explicación del Código

Ejercicio Práctico

Solución del Ejercicio

Uso de Interceptors para Manejo Global de Errores

Ejemplo de Interceptor

Registro del Interceptor

Explicación del Código

Conclusión

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas