El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com gestionar errors en aplicacions Angular, especialment quan fem sol·licituds HTTP. La gestió d'errors és una part crucial del desenvolupament d'aplicacions robustes i fiables. Ens assegura que l'aplicació pugui manejar situacions inesperades de manera elegant i proporcionar una bona experiència d'usuari.

Conceptes clau

Tipus d'errors HTTP:
- Errors del client (4xx): Aquests errors indiquen que hi ha un problema amb la sol·licitud enviada pel client. Exemples comuns inclouen 404 (No trobat) i 400 (Sol·licitud incorrecta).
- Errors del servidor (5xx): Aquests errors indiquen que hi ha un problema amb el servidor que processa la sol·licitud. Un exemple comú és el 500 (Error intern del servidor).
Gestió d'errors amb el client HTTP d'Angular:
- Utilitzar el mètode catchError de RxJS per interceptar i gestionar errors en les sol·licituds HTTP.
Proporcionar retroalimentació a l'usuari:
- Mostrar missatges d'error clars i útils a l'usuari quan es produeix un error.

Exemple pràctic

Configuració del servei HTTP

Primer, crearem un servei que faci una sol·licitud HTTP i gestioni els errors.

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 client
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // Error del servidor
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
  }
}

Utilització del servei en un component

Ara, utilitzarem el servei en un component i mostrarem els errors a l'usuari.

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

@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="errorMessage" class="error">
      {{ errorMessage }}
    </div>
    <div *ngIf="data">
      <!-- Mostrar les dades aquí -->
    </div>
  `,
  styles: [`
    .error {
      color: red;
    }
  `]
})
export class DataComponent implements OnInit {

  data: any;
  errorMessage: string;

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getData().subscribe(
      (response) => {
        this.data = response;
      },
      (error) => {
        this.errorMessage = error;
      }
    );
  }
}

Explicació del codi

Servei DataService:
- El mètode getData fa una sol·licitud GET a l'API.
- Utilitza catchError per interceptar errors i passar-los al mètode handleError.
- El mètode handleError distingeix entre errors del client i del servidor i retorna un missatge d'error adequat.
Component DataComponent:
- Utilitza el servei DataService per obtenir dades.
- Si es produeix un error, el missatge d'error es guarda a errorMessage i es mostra a l'usuari.

Exercici pràctic

Exercici

Crea un nou servei que faci una sol·licitud POST a una API fictícia.
Implementa la gestió d'errors per a la sol·licitud POST.
Utilitza el servei en un component i mostra els errors a l'usuari.

Solució

Servei

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 PostService {

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

  constructor(private http: HttpClient) { }

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

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

Component

import { Component } from '@angular/core';
import { PostService } from './post.service';

@Component({
  selector: 'app-post',
  template: `
    <div *ngIf="errorMessage" class="error">
      {{ errorMessage }}
    </div>
    <button (click)="createPost()">Create Post</button>
  `,
  styles: [`
    .error {
      color: red;
    }
  `]
})
export class PostComponent {

  errorMessage: string;

  constructor(private postService: PostService) { }

  createPost(): void {
    const postData = { title: 'New Post', content: 'This is a new post.' };
    this.postService.createPost(postData).subscribe(
      (response) => {
        console.log('Post created successfully', response);
      },
      (error) => {
        this.errorMessage = error;
      }
    );
  }
}

Conclusió

En aquesta secció, hem après com gestionar errors en aplicacions Angular, especialment en sol·licituds HTTP. Hem vist com utilitzar el mètode catchError de RxJS per interceptar errors i proporcionar missatges d'error útils a l'usuari. La gestió d'errors és essencial per crear aplicacions robustes i proporcionar una bona experiència d'usuari.

Gestió d'errors

Conceptes clau

Exemple pràctic

Configuració del servei HTTP

Utilització del servei en un component

Explicació del codi

Exercici pràctic

Exercici

Solució

Servei

Component

Conclusió

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques