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

Fer sol·licituds HTTP

Següent ►
►

En aquest tema, aprendrem com fer sol·licituds HTTP en una aplicació Angular utilitzant el HttpClient d'Angular. Aquest mòdul és essencial per a la comunicació amb servidors i l'obtenció de dades externes.

Objectius

  • Comprendre com configurar el HttpClientModule.
  • Aprendre a fer sol·licituds GET i POST.
  • Gestionar les respostes HTTP.
  • Tractar errors en les sol·licituds HTTP.

Configuració del HttpClientModule

Abans de poder utilitzar el HttpClient, hem d'importar el HttpClientModule en el nostre mòdul principal (AppModule).

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // Afegim el HttpClientModule aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Fer una sol·licitud GET

Una sol·licitud GET s'utilitza per obtenir dades d'un servidor. A continuació, es mostra com fer una sol·licitud GET utilitzant el HttpClient.

Exemple de codi

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

@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);
  }
}

Explicació

  1. Importacions: Importem HttpClient i Observable de @angular/common/http i rxjs respectivament.
  2. Injectable: Marquem la classe DataService com a injectable.
  3. Constructor: Injectem HttpClient en el constructor.
  4. getData(): Definim un mètode getData que retorna un Observable de la sol·licitud GET.

Utilització del servei en un component

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

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

  constructor(private dataService: DataService) { }

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

Explicació

  1. Importacions: Importem DataService i OnInit.
  2. Constructor: Injectem DataService en el constructor.
  3. ngOnInit(): En el mètode ngOnInit, fem la sol·licitud GET i assignem la resposta a la propietat data.

Fer una sol·licitud POST

Una sol·licitud POST s'utilitza per enviar dades a un servidor. A continuació, es mostra com fer una sol·licitud POST utilitzant el HttpClient.

Exemple de codi

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

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

  constructor(private http: HttpClient) { }

  postData(data: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, data);
  }
}

Explicació

  1. postData(): Definim un mètode postData que accepta un objecte data i retorna un Observable de la sol·licitud POST.

Utilització del servei en un component

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

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

  constructor(private dataService: DataService) { }

  sendData() {
    const data = { name: 'John', age: 30 };
    this.dataService.postData(data).subscribe(
      (response) => console.log('Response: ', response),
      (error) => console.error('Error: ', error)
    );
  }
}

Explicació

  1. sendData(): Definim un mètode sendData que crea un objecte data i fa la sol·licitud POST utilitzant el servei DataService.

Gestió d'errors

És important gestionar els errors en les sol·licituds HTTP per proporcionar una millor experiència d'usuari.

Exemple de codi

// data.service.ts
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 = 'Unknown error!';
    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);
  }
}

Explicació

  1. catchError: Utilitzem l'operador catchError per capturar errors.
  2. handleError(): Definim un mètode handleError per gestionar els errors i retornar un missatge d'error adequat.

Exercicis pràctics

Exercici 1: Fer una sol·licitud GET

  1. Crea un nou servei UserService.
  2. Defineix un mètode getUsers que faci una sol·licitud GET a https://jsonplaceholder.typicode.com/users.
  3. Mostra la llista d'usuaris en un component.

Solució

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

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

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

@Component({
  selector: 'app-user',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserComponent implements OnInit {
  users: any;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers().subscribe(
      (response) => this.users = response,
      (error) => console.error('Error: ', error)
    );
  }
}

Exercici 2: Fer una sol·licitud POST

  1. Afegeix un mètode addUser al UserService que faci una sol·licitud POST a https://jsonplaceholder.typicode.com/users.
  2. Crea un formulari en un component per afegir un nou usuari.

Solució

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

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

  addUser(user: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, user);
  }
}

// user.component.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="user.name" name="name" placeholder="Name" required>
      <button type="submit">Add User</button>
    </form>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserComponent {
  users: any;
  user = { name: '' };

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers().subscribe(
      (response) => this.users = response,
      (error) => console.error('Error: ', error)
    );
  }

  onSubmit() {
    this.userService.addUser(this.user).subscribe(
      (response) => {
        this.users.push(response);
        this.user.name = '';
      },
      (error) => console.error('Error: ', error)
    );
  }
}

Conclusió

En aquest tema, hem après com fer sol·licituds HTTP GET i POST utilitzant el HttpClient d'Angular. També hem vist com gestionar les respostes i errors en les sol·licituds HTTP. Aquestes habilitats són fonamentals per a la comunicació amb servidors i l'obtenció de dades externes en aplicacions Angular.

◄ Anterior
◄
Següent ►
►

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

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