13 HttpClientModule e collegamento HTTP
Fino ad ora abbiamo lavorato con dati statici recuperati da un array stanziato manualmente nel service.
Ovviamente il nostro obiettivo è recuperare dati dinamicamente collegandoci ad un database, per fare questo supponiamo di avere lato back-end un applicativo laravel e un database mySQL con la tabella users.
Normalmente il collegamento viene eseguito con AJAX tramite l’interfaccia XMLHttpRequest o con il più moderno fetch() API.
In Angular è presente il modulo HttpClient che permette di configurare facilmente le chiamate HTTP verso un server e un database.
Per prima cosa bisogna includere HttpClientModule e HttpClient dalla libreria common/http di angular nel file app.module.ts
import {HttpClient, HttpClientModule} from '@angular/common/http';
e poi aggiungerlo negli imports
HttpClientModule
per utilizzare il modulo dobbiamo iniettare nel costruttore del nostro servizio HttpClient
constructor(private http:HttpClient ) { }
e poi chiamare il metodo get() passando l’url come parametro e abbonandosi con la subscribe a questo servizio.
getUsers() {
this.http.get(this.APIURL).subscribe(
data => console.log(data);
);
cancelliamo i dati di esempio dell’array lasciandolo vuoto
users: User[] = [];
sotto a users[] creiamo una variabile privata che conterrà l’url,
private APIURL = 'http://mylaravelapp.test:8000/users';
questo percorso sarà l’end point sul quale effettueremo le chiamate. Noteremo nella console un errore dovuto ad un sistema di protezione abilitato di default, che si verifica quando la chiamata viene fatta da un server differente, da un altro dominio, da un altro protocollo o da una porta diversa.
Aggiungiamo alla nostra subscribe una seconda funzione che riceve e restituisce l’errore
getUsers() {
this.http.get(this.APIURL).subscribe(
data => {
console.log(data);
},
error => alert(error.message)
);
return this.users;
}
Per autorizzare le nostre API a questa protezione e all’errore che si crea, possiamo dare uno sguardo alla documentazione di Mozilla developer e la tecnologia Cross-Origin Resource Sharing (CORS).
Esistono diverse soluzioni per abilitare le richieste esterne, in laravel per esempio esiste il plugin fruicake che si può integrare agevolmente come middleware.
Una volta configurati i permessi corretti lato server, vedremo che comunque i nostri utenti non compaiono nella tabella utenti, in quanto il metodo get() di httpClient non avrà ancora i dati caricati per un certo delay della risposta del server, quindi facciamo restituire solo l’ observable dal metodo getUsers(), non restituiamo qui this.users e faremo poi la subscribe lato client
getUsers() {
return this.http.get(this.APIURL);
}
Ora con getUsers() stiamo ritornando l’observable, ma non produrra nessun risultato perchè non ci siamo abbonati a questo observable, quindi andando in users.component, nell’ ngOnInit troviamo this.users = this.servizio.getUsers(); che trasformeremo in una sottoscrizione all’ observable
ngOnInit() {
this.service.getUsers().subscribe(responce => this.users = responce.data );
}
Ora visualizzeremo gli utenti, ma se clicchiamo sul bottone info non vedremo i dettagli perchè anche nella getUser() dobbiamo restituire una promise costruendo l’url seguito dall’id dell’utente
getUser(id: number) {
return this.http.get(this.APIURL + '/' + id);
}
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b
a
b