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

HOME

En aquest tema, aprendrem com gestionar les respostes HTTP en una aplicació Angular. Quan fem sol·licituds HTTP, és crucial saber com tractar les dades que rebem, així com gestionar possibles errors. A continuació, veurem com fer-ho pas a pas.

Objectius

Comprendre com rebre i processar respostes HTTP.
Aprendre a gestionar errors en les respostes HTTP.
Utilitzar operadors d'RxJS per transformar i manipular les dades rebudes.

Rebre respostes HTTP

Quan fem una sol·licitud HTTP, rebem una resposta que conté dades. Utilitzarem el servei HttpClient d'Angular per fer sol·licituds i gestionar les respostes.

Exemple bàsic

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-data-fetcher',
  template: `<div *ngIf="data">{{ data | json }}</div>`,
})
export class DataFetcherComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/data')
      .subscribe(response => {
        this.data = response;
      });
  }
}

Explicació

Importació del HttpClient: Importem HttpClient des de @angular/common/http.
Injecció de dependències: Injecció del servei HttpClient en el constructor del component.
Fer una sol·licitud GET: Utilitzem el mètode get del HttpClient per fer una sol·licitud GET a una URL.
Subscripció a l'observable: Ens subscrivim a l'observable retornat per get per rebre la resposta.

Gestionar errors

És important gestionar els errors que poden ocórrer durant les sol·licituds HTTP. Utilitzarem l'operador catchError d'RxJS per capturar i gestionar errors.

Exemple amb gestió d'errors

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-data-fetcher',
  template: `
    <div *ngIf="data">{{ data | json }}</div>
    <div *ngIf="error">{{ error }}</div>
  `,
})
export class DataFetcherComponent implements OnInit {
  data: any;
  error: string;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/data')
      .pipe(
        catchError(err => {
          this.error = 'Error fetching data';
          return of(null);
        })
      )
      .subscribe(response => {
        this.data = response;
      });
  }
}

Explicació

Importació de catchError i of: Importem l'operador catchError i la funció of d'RxJS.
Utilització de catchError: Utilitzem catchError per capturar errors i retornar un observable amb un valor per defecte (null en aquest cas).
Assignació d'un missatge d'error: Assignem un missatge d'error a la propietat error del component.

Transformar dades amb operadors d'RxJS

Podem utilitzar operadors d'RxJS per transformar les dades rebudes abans de processar-les.

Exemple amb transformació de dades

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-data-fetcher',
  template: `<div *ngIf="data">{{ data | json }}</div>`,
})
export class DataFetcherComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/data')
      .pipe(
        map(response => {
          // Transformem les dades aquí
          return response['items'];
        })
      )
      .subscribe(transformedData => {
        this.data = transformedData;
      });
  }
}

Explicació

Importació de map: Importem l'operador map d'RxJS.
Utilització de map: Utilitzem map per transformar les dades rebudes. En aquest exemple, accedim a la propietat items de la resposta.

Exercici pràctic

Enunciat

Crea un component que faci una sol·licitud HTTP a una API pública (per exemple, https://jsonplaceholder.typicode.com/posts) i mostri els títols dels posts en una llista. Gestiona els errors mostrant un missatge d'error si la sol·licitud falla.

Solució

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { catchError, map } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-post-list',
  template: `
    <ul *ngIf="posts">
      <li *ngFor="let post of posts">{{ post.title }}</li>
    </ul>
    <div *ngIf="error">{{ error }}</div>
  `,
})
export class PostListComponent implements OnInit {
  posts: any[];
  error: string;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/posts')
      .pipe(
        map(response => response as any[]),
        catchError(err => {
          this.error = 'Error fetching posts';
          return of([]);
        })
      )
      .subscribe(posts => {
        this.posts = posts;
      });
  }
}

Explicació

Sol·licitud GET: Fem una sol·licitud GET a l'API pública.
Transformació de dades: Utilitzem map per convertir la resposta en un array.
Gestió d'errors: Utilitzem catchError per gestionar errors i retornar un array buit en cas d'error.
Visualització de dades: Mostrem els títols dels posts en una llista no ordenada (<ul>).

Resum

En aquest tema, hem après com gestionar respostes HTTP en Angular. Hem vist com rebre i processar dades, gestionar errors i transformar dades utilitzant operadors d'RxJS. Aquests conceptes són fonamentals per treballar amb APIs i serveis web en aplicacions Angular.

Gestionar respostes HTTP

Objectius

Rebre respostes HTTP

Exemple bàsic

Explicació

Gestionar errors

Exemple amb gestió d'errors

Explicació

Transformar dades amb operadors d'RxJS

Exemple amb transformació de dades

Explicació

Exercici pràctic

Enunciat

Solució

Explicació

Resum

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