El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Gestió de respostes HTTP

Següent ►
►

En aquest tema, aprendrem com gestionar les respostes HTTP en una aplicació Angular. Quan fem sol·licituds HTTP, és crucial saber com tractar les respostes, ja que poden contenir dades importants o errors que necessitem manejar adequadament.

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 de les respostes.

Continguts

  1. Recepció de respostes HTTP
  2. Gestió d'errors HTTP
  3. Transformació de dades amb operadors d'RxJS
  4. Exemples pràctics
  5. Exercicis

  1. Recepció de respostes HTTP

Quan fem una sol·licitud HTTP amb el HttpClient d'Angular, rebem una resposta que podem processar. Aquí teniu un exemple bàsic de com fer una sol·licitud GET i gestionar la resposta:

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

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

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl);
  }
}

En aquest exemple, getData retorna un observable que emet la resposta de la sol·licitud GET. Per processar aquesta resposta, podem subscriure'ns a l'observable:

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

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

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      response => {
        this.data = response;
      },
      error => {
        console.error('Error:', error);
      }
    );
  }
}

  1. Gestió d'errors HTTP

És important gestionar els errors que poden ocórrer durant les sol·licituds HTTP. Podem fer-ho utilitzant el segon paràmetre de la funció subscribe:

this.dataService.getData().subscribe(
  response => {
    this.data = response;
  },
  error => {
    console.error('Error:', error);
    // Aquí podem mostrar un missatge d'error a l'usuari
  }
);

També podem utilitzar l'operador catchError d'RxJS per gestionar errors de manera més elegant:

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

getData() {
  return this.http.get(this.apiUrl).pipe(
    catchError(error => {
      console.error('Error:', error);
      return throwError(error);
    })
  );
}

  1. Transformació de dades amb operadors d'RxJS

Podem utilitzar operadors d'RxJS per transformar les dades de la resposta abans de retornar-les. Per exemple, podem utilitzar l'operador map per extreure una part específica de la resposta:

import { map } from 'rxjs/operators';

getData() {
  return this.http.get(this.apiUrl).pipe(
    map(response => response['data']) // Suposant que la resposta té una propietat 'data'
  );
}

  1. Exemples pràctics

Exemple 1: Sol·licitud GET amb gestió d'errors

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

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

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      catchError(error => {
        console.error('Error:', error);
        return throwError(error);
      })
    );
  }
}

Exemple 2: Transformació de dades amb map

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

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

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      map(response => response['data']),
      catchError(error => {
        console.error('Error:', error);
        return throwError(error);
      })
    );
  }
}

  1. Exercicis

Exercici 1: Sol·licitud GET amb gestió d'errors

Crea un servei que faci una sol·licitud GET a una API pública i gestioni els errors. Mostra les dades en un component i gestiona els errors mostrant un missatge a l'usuari.

Exercici 2: Transformació de dades

Modifica el servei de l'exercici anterior per transformar les dades de la resposta abans de retornar-les. Per exemple, extreu una propietat específica de la resposta.

Solucions

Solució Exercici 1

// data.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.publicapis.org/entries';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      catchError(error => {
        console.error('Error:', error);
        return throwError(error);
      })
    );
  }
}

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

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

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      response => {
        this.data = response;
      },
      error => {
        this.error = 'Error al carregar les dades';
      }
    );
  }
}

Solució Exercici 2

// data.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.publicapis.org/entries';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      map(response => response['entries']),
      catchError(error => {
        console.error('Error:', error);
        return throwError(error);
      })
    );
  }
}

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

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

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      response => {
        this.data = response;
      },
      error => {
        this.error = 'Error al carregar les dades';
      }
    );
  }
}

Conclusió

En aquesta secció, hem après com gestionar les respostes HTTP en Angular, incloent la recepció de dades, la gestió d'errors i la transformació de dades utilitzant operadors d'RxJS. Aquests conceptes són fonamentals per treballar amb APIs i serveis web en aplicacions Angular. En el proper tema, explorarem com utilitzar observables per gestionar fluxos de dades de manera reactiva.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats