Il modulo Angular HttpClient è stato introdotto a partire da Angular 4.3. Questa nuova API è disponibile nel pacchetto @angular/common/http e intende sostituire il vecchio HttpModule. In questa guida ad HttpClient, impareremo come utilizzare il metodo HttpClient.Get per interrogare un’API ed ottenere dati per la nostra applicazione. Come il precedente HtppModule, anche HttpClientModule utilizza gli RxJs Observable.
Leggi anche le altre mie guide su come creare componenti, come creare e iniettare servizi, come usare pipe e direttive per costruire applicazioni Angular.
Questa guida fa parte di Angular: la guida definitiva
Index
Angular HttpClient: cosè e come funziona
HttpClient è un modulo separato in Angular ed è disponibile nel pacchetto @angular/common/http. Tutto quello che devi fare è importarlo ed iniettarlo nel tuo componente/servizio. Successivamente, potrai utilizzare il metodo HttpClient.Get per inviare una richiesta HTTP ed attendere la risposta con una Subscribe. Quando arriva la risposta, potrai inviarla all’oggetto desiderato e visualizzare quindi il risultato.
Vediamo i vari passaggi
Importa HttpClient Module nel tuo modulo principale
Devi importarlo nel modulo app.module. Inoltre, dovrai aggiungerlo all’array degli import.
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Importa HttpClient Module in un component/servizio
Importa i moduli @angular/common/http & rxjs/Rx nel componente/servizio
import { HttpClient } from '@angular/common/http';
import { Observable} from 'rxjs/Rx';
Inietta HttpClient nel componente/servizio
constructor(public http: HttpClient) {
}
Chiama il metodo HttpClient.Get
Invia la richiesta HttpClient.get al tuo endpoint. Il metodo HttpClient.Get restituisce un observable, con una subscribe. Il risultato arriva in formato JSON e viene visualizzato all’utente.
public getData() {
this.HttpClient.get<any[]>(this.baseUrl+'targetUrl')
.subscribe(data => {
this.data= data;
},
error => {
}
);
}
Questo è tutto.
HttpClient.get
HttpClient.get invia la richiesta HTTP Get all’endpoint e analizza il risultato restituito nel tipo desiderato. Il tipo di risposta predefinito è JSON. Se si desidera qualsiasi altro tipo, è necessario specificarlo esplicitamente utilizzando il parametro responseType.
Parameters of the HttpClient.get
headers
Ti consente di aggiungere intestazioni HTTP alle richieste in uscita.
observe
Il metodo HttpClient.get restituisce il body della risposta analizzata come JSON (o del tipo specificato in responseType). A volte potrebbe essere necessario leggere l’intera risposta insieme alle intestazioni e ai codici di stato. Per fare ciò è possibile impostare la proprietà observ sulla risposta.
Le opzioni consentite sono:
- una response che restituisce l’intera response
- un body che restituisce solo il body
- event che restituisce una response con eventi
params
Ci consente di aggiungere i parametri URL alla Get Request
reportProgress
Questa è una proprietà booleana. Impostala su true, se vuoi ricevere una notifica sullo stato di avanzamento della request. Questa è una funzione piuttosto utile quando hai una grande quantità di dati da scaricare (o caricare) e vuoi che l’utente ti comunichi l’avanzamento.
responseType
La risposta predefinita ricevuta è di tipo Json. Nel caso in cui si desideri un diverso tipo di risposta, è necessario utilizzare questo parametro. Le opzioni consentite sono arraybuffer, BLOB, JSON e text.
withCredentials
È di tipo booleano. Se il valore è true, HttpClient.get richiederà i dati con le credenziali
Return da httpClient.Get
Quando utilizzi il service HttpClient per ottenere dati, in realtà restituisce un Observable.
Cosè un Observable
Un Observable ci aiuta a gestire i dati asincroni. Puoi considerare gli Observable come un array di oggetti restituiti in modo asincrono.
Gli Observable implementano gli observer design pattern, in cui gli Observable mantengono un elenco di dipendenze, chiamate observers, e notificano automaticamente eventuali cambiamenti di stato, di solito chiamando uno dei loro metodi.