Angular chiamata AJAX: il servizio HttpClient

Angular, per effettuare una chiamata AJAX, mette a disposizione il servizio HttpClient.

La maggior parte delle applicazioni web hanno bisogno di comunicare con il backend utilizzando chiamate HTTP.

Per questo motivo, il team che sviluppa e mantiene Angular ha creato diverse classi che possono essere utilizzate per interagire con il server.

Indice

Angular: eseguire chiamate HTTP

In questo articolo vedrai come utilizzare il servizio HttpClient reso disponibile nel modulo HttpClientModule.

Questo servizio mette a disposizione diversi metodi per effettuare chiamate HTTP (POST, GET, PUT, DELETE, …).

Per ciascuna di queste chiamate, potrai impostare diverse proprietà.

Ad esempio, potrai impostare degli headers HTTP.

Per poter utilizzare HttpClient, assicurati di aver incluso il modulo HttpClientModule.

Solitamente, l’importazione è da effettuare nel file app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  // inserisci HttpClientModule in questo array
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular: effettuare chiamata GET

Il metodo get() del servizio HttpClient permette di effettuare chiamate HTTP GET.

Questa funzione supporta diversi tipo di parametri di input.

Nel seguito vedrai un estratto di codice che mostra un esempio comune di utilizzo di questa funzione.

constructor(private http: HttpClient) {}
performGetRequest(): Observable<any> {
   const url: string = 'https://indirizzo.com';
   const httpOptions = {
     params: {
       aParameter: "gatto",
     },
   };
   
   // effettua richiesta https://indirizzo.com?aParameter=gatto
   return this.http.get(url, httpOptions);
}

Angular: effettuare chiamata POST

La funzione post() del servizio HttpClient permette di effettuare chiamate HTTP POST.

  constructor(private http: HttpClient) {}
  performPostRequest(): Observable<any> {
    const url: string = 'https://indirizzo.com';
    const oggettoInput = {
      params: {
        aParameter: "qualcosa",
      },
    };
    return this.http.post(url, oggettoInput);
  }

Il codice posto qui sopra effettua una richiesta POST all’indirizzo https://indirizzo.com.

Nella richiesta sarà incluso l’oggetto oggettoInput, serializzato tramite JSON.

Se volessi approfondire questo formato di serializzazione, ti invito a leggere l’articolo File JSON: cosa sono, come si utilizzano.

Angular HttpClient: effettuare più tentativi

Il framework mette a disposizione numerosi meccanismi per ritentare eventuali chiamate HTTP fallite.

Le chiamate considerate “fallite” sono quelle che ottengono un codice di risposta HTTP 4xx o 5xx, oppure non ne ottengono alcuna.

Il seguente estratto di codice ti mostra come effettuare più tentativi di chiamata AJAX.

constructor(private http: HttpClient) {}
performPostRequest(): Observable<any> {
    const url: string = 'https://unindirizzo.com';
    const oggettoInput = {
        params: {
            aParameter: "qualcosa",
        },
    };
    const retryPayload = {
      // tentativi desiderati
      count: 3,
      delay: (error: HttpErrorResponse) => {
        return this.shouldRetry(error);
      },
    };
    return this.http.post(url, httpOptions).pipe(retry(retryPayload));
}
shouldRetry(error: HttpErrorResponse) {
    // il tempo di attesa tra un tentativo e l'altro,
    // espresso in millisecondi.
    const delay: number = 1000;
    return timer(delay);
}

Angular chiamata ajax: esempio pratico

In questo esempio ho costruito un form che ti consente di effettuare richieste GET e POST.

Potrai inoltre impostare il numero di tentativi effettuati ed il tempo di attesa tra un tentativo e l’altro.

L’indirizzo al quale vengono effettuate le richieste ritorna un codice di risposta casuale.

L’esempio farà in modo che vengano fatte richieste finché non si verifica una delle due condizioni:

Il numero di tentativi massimo è raggiunto
La richiesta ha successo (codice di risposta 200)

Approfondimenti Angular

In questo blog sono presenti numerosi articoli relativi ad Angular, ad RxJS ed al Web Development.

Eccone alcuni:

Conclusioni

In questo articolo hai visto come utilizzare il servizio HttpClient per effettuare chiamate AJAX in Angular.

Se volessi approfondire ulteriormente il suo utilizzo, ti consiglio di consultare la documentazione ufficiale di Angular relativa alla comunicazione con il backend.

Seguimi su