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

Realització de sol·licituds HTTP

Següent ►
►

En aquest tema, aprendrem com realitzar sol·licituds HTTP en una aplicació Angular utilitzant el servei HttpClient. Aquest servei ens permet comunicar-nos amb servidors remots per obtenir dades, enviar dades, actualitzar recursos i eliminar recursos.

Objectius

  • Entendre com configurar i utilitzar el servei HttpClient.
  • Aprendre a realitzar sol·licituds GET, POST, PUT i DELETE.
  • Gestionar errors en les sol·licituds HTTP.

Configuració del servei HttpClient

Abans de començar a realitzar sol·licituds HTTP, hem d'assegurar-nos que el mòdul HttpClientModule estigui importat 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 // Importem HttpClientModule aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Realització de sol·licituds GET

Les sol·licituds GET s'utilitzen per obtenir dades d'un servidor. A continuació, es mostra com realitzar una sol·licitud GET utilitzant HttpClient.

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

En aquest exemple, hem creat un servei DataService que té un mètode getData per realitzar una sol·licitud GET a l'URL especificada.

Realització de sol·licituds POST

Les sol·licituds POST s'utilitzen per enviar dades a un servidor. A continuació, es mostra com realitzar una sol·licitud POST.

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

En aquest exemple, hem afegit un mètode postData que envia dades al servidor utilitzant una sol·licitud POST.

Realització de sol·licituds PUT

Les sol·licituds PUT s'utilitzen per actualitzar recursos en un servidor. A continuació, es mostra com realitzar una sol·licitud PUT.

// 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) { }

  updateData(id: number, data: any): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put<any>(url, data);
  }
}

En aquest exemple, hem afegit un mètode updateData que actualitza un recurs específic en el servidor utilitzant una sol·licitud PUT.

Realització de sol·licituds DELETE

Les sol·licituds DELETE s'utilitzen per eliminar recursos d'un servidor. A continuació, es mostra com realitzar una sol·licitud DELETE.

// 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) { }

  deleteData(id: number): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete<any>(url);
  }
}

En aquest exemple, hem afegit un mètode deleteData que elimina un recurs específic en el servidor utilitzant una sol·licitud DELETE.

Gestió d'errors

És important gestionar els errors que poden ocórrer durant les sol·licituds HTTP. A continuació, es mostra com gestionar errors utilitzant el mètode catchError de RxJS.

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

En aquest exemple, hem afegit un mètode handleError que gestiona els errors i retorna un missatge d'error adequat.

Exercicis pràctics

  1. Exercici 1: Crea un servei que realitzi una sol·licitud GET a una API pública i mostri les dades en un component.
  2. Exercici 2: Crea un formulari en un component que permeti enviar dades a un servidor utilitzant una sol·licitud POST.
  3. Exercici 3: Implementa la funcionalitat per actualitzar un recurs existent en el servidor utilitzant una sol·licitud PUT.
  4. Exercici 4: Implementa la funcionalitat per eliminar un recurs del servidor utilitzant una sol·licitud DELETE.

Solucions

Exercici 1: Solució

// 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://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

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

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="posts">
      <div *ngFor="let post of posts">
        <h3>{{ post.title }}</h3>
        <p>{{ post.body }}</p>
      </div>
    </div>
  `
})
export class AppComponent implements OnInit {
  posts: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

Exercici 2: Solució

// 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://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

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

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

@Component({
  selector: 'app-root',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="post.title" name="title" placeholder="Title" required>
      <textarea [(ngModel)]="post.body" name="body" placeholder="Body" required></textarea>
      <button type="submit">Submit</button>
    </form>
  `
})
export class AppComponent {
  post = { title: '', body: '' };

  constructor(private dataService: DataService) { }

  onSubmit() {
    this.dataService.createPost(this.post).subscribe(response => {
      console.log('Post created:', response);
    });
  }
}

Exercici 3: Solució

// 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://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  updatePost(id: number, post: any): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put<any>(url, post);
  }
}

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

@Component({
  selector: 'app-root',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="post.id" name="id" placeholder="ID" required>
      <input [(ngModel)]="post.title" name="title" placeholder="Title" required>
      <textarea [(ngModel)]="post.body" name="body" placeholder="Body" required></textarea>
      <button type="submit">Update</button>
    </form>
  `
})
export class AppComponent {
  post = { id: null, title: '', body: '' };

  constructor(private dataService: DataService) { }

  onSubmit() {
    this.dataService.updatePost(this.post.id, this.post).subscribe(response => {
      console.log('Post updated:', response);
    });
  }
}

Exercici 4: Solució

// 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://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  deletePost(id: number): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete<any>(url);
  }
}

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

@Component({
  selector: 'app-root',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="postId" name="id" placeholder="ID" required>
      <button type="submit">Delete</button>
    </form>
  `
})
export class AppComponent {
  postId: number;

  constructor(private dataService: DataService) { }

  onSubmit() {
    this.dataService.deletePost(this.postId).subscribe(response => {
      console.log('Post deleted:', response);
    });
  }
}

Conclusió

En aquest tema, hem après com realitzar sol·licituds HTTP en una aplicació Angular utilitzant el servei HttpClient. Hem vist com realitzar sol·licituds GET, POST, PUT i DELETE, així com gestionar errors en les sol·licituds HTTP. A més, hem proporcionat exercicis pràctics per reforçar els conceptes apresos. En el següent tema, explorarem com gestionar les respostes HTTP.

◄ 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