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

Peticions HTTP i APIs

Següent ►
►

En aquest tema, aprendrem com fer peticions HTTP i treballar amb APIs en una aplicació Ionic. Les peticions HTTP són fonamentals per interactuar amb serveis web i obtenir dades dinàmiques. Utilitzarem el mòdul HttpClient d'Angular per gestionar aquestes peticions.

Objectius

  • Entendre què són les peticions HTTP i les APIs.
  • Configurar el mòdul HttpClient en una aplicació Ionic.
  • Fer peticions GET, POST, PUT i DELETE.
  • Gestionar errors en les peticions HTTP.
  • Utilitzar serveis per encapsular la lògica de les peticions HTTP.

Què són les Peticions HTTP i les APIs?

Peticions HTTP

Les peticions HTTP són sol·licituds que es fan des del client (la nostra aplicació) al servidor per obtenir o enviar dades. Els tipus més comuns de peticions HTTP són:

  • GET: Obtenir dades del servidor.
  • POST: Enviar dades al servidor.
  • PUT: Actualitzar dades existents al servidor.
  • DELETE: Eliminar dades del servidor.

APIs

Una API (Application Programming Interface) és un conjunt de regles que permeten a diferents aplicacions comunicar-se entre elles. Les APIs web utilitzen peticions HTTP per permetre aquesta comunicació.

Configuració del Mòdul HttpClient

Per utilitzar HttpClient en una aplicació Ionic, primer hem d'importar i configurar el mòdul HttpClientModule en el nostre projecte.

Passos per Configurar HttpClientModule

  1. Instal·lar Angular HttpClient (si no està ja instal·lat):

    npm install @angular/common@latest

  2. Importar HttpClientModule en el mòdul principal (app.module.ts):

    import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule // Afegir aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Realitzant Peticions HTTP

Petició GET

Exemple de Petició GET

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

Petició POST

Exemple de Petició POST

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

Petició PUT

Exemple de Petició PUT

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: string, data: any): Observable<any> {
    return this.http.put<any>(`${this.apiUrl}/${id}`, data);
  }
}

Petició DELETE

Exemple de Petició DELETE

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: string): Observable<any> {
    return this.http.delete<any>(`${this.apiUrl}/${id}`);
  }
}

Gestionant Errors en les Peticions HTTP

És important gestionar els errors que poden ocórrer durant les peticions HTTP. Utilitzarem el mètode catchError de RxJS per capturar i gestionar errors.

Exemple de Gestió d'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 = 'An unknown error occurred!';
    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);
  }
}

Exercicis Pràctics

Exercici 1: Petició GET

Crea un servei que faci una petició GET a una API pública (per exemple, https://jsonplaceholder.typicode.com/posts) i mostri les dades en una pàgina.

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

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

@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {
  posts: any[] = [];

  constructor(private dataService: DataService) {}

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

Exercici 2: Petició POST

Crea un formulari que permeti enviar dades a una API pública (per exemple, https://jsonplaceholder.typicode.com/posts) utilitzant una petició POST.

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

// create-post.page.ts
import { Component } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-create-post',
  templateUrl: './create-post.page.html',
  styleUrls: ['./create-post.page.scss'],
})
export class CreatePostPage {
  post = {
    title: '',
    body: '',
    userId: 1
  };

  constructor(private dataService: DataService) {}

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

Resum

En aquest tema, hem après a fer peticions HTTP i treballar amb APIs en una aplicació Ionic. Hem vist com configurar el mòdul HttpClient, realitzar peticions GET, POST, PUT i DELETE, i gestionar errors en les peticions HTTP. També hem practicat aquests conceptes amb exercicis pràctics. Ara estem preparats per treballar amb dades dinàmiques en les nostres aplicacions Ionic.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats