Effettuare chiamate Ajax con Angular
Quando sviluppiamo un'applicazione web, una delle armi più potenti a nostra disposizone è la possibilità di effettuare chiamate AJAX. Quest'asserzione è talmente vera che qualunque framework o libreria web offre questa funzionalità. Angular permette di effettuare chiamate AJAX tramite le classi appartenenti al modulo HttpClientModule e in particolare tramite la classe HttpClient. Nel corso di questo articolo, vedremo come utilizzare le funzionalità messe a disposizone dal modulo per invocare API sul server sia per leggere che per scrivere dati e come sfruttare anche la libreria RxJS per creare funzionalità avanzate.
La nostra prima chiamata AJAX
Il primo passo per eseguire una chiamata AJAX è quello di importare il modulo HttpClientModule all'interno del nostro modulo sfruttando la proprietà imports del decorator @NgModule.
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
CommonModule,
HttpClientModule
]
})
export class MyAppModule { }Una volta importato il modulo, le sue classi sono pronte per essere utilizzate all'interno del nostro codice.
Come detto, la classe principale del modulo è HttpClient. Per utilizzarla dobbiamo farcene iniettare un'istanza all'interno del costruttore dal motore di dependency injection di Angular e salvare l'istanza in un campo per poi utilizzarne i metodi. Vediamo ora un esempio di chiamata AJAX che invoca il server in GET.
export class CustomerService {
constructor(private http: HttpClient) { }
searchCustomers() {
return this.http.get<Customer[]>('customers/list');
}
}In questo esempio, vediamo che la classe HttpClient mette a disposizione il metodo get per effettuare chiamate al server usando il verbo GET. Nella sua forma più semplice, questo metodo accetta un solo parametro che corrisponde all'url da invocare. Il metodo get restituisce un oggetto Observable<T> dove T è il tipo che passiamo come generic al metodo. Nel caso dell'esempio, il metodo get torna un Observable<Customer[]>. Se non passiamo il parametro generico il metodo get restituisce un Observable<Object>. Questa tipizzazione è una pura finzione offerta da TypeScript per semplificare lo sviluppo offrendo dei tipi. A runtime, la classe HttpClient non fa altro che deserializzare in un oggetto JavaScript la stringa JSON ricevuta dal server.
Il verbo HTTP GET è tipicamente usato quado dobbiamo recuperare dati dal server, ma, quando dobbiamo inviarli, i metodi che vanno usati sono altri cioè POST, PUT, PATCH e DELETE a seconda che vogliamo creare, aggiornare o eliminare dati. Questi verbi hanno un omonimo metodo nella classe HttpClient come mostrato nel prossimo esempio.
export class CustomerService {
constructor(private http: HttpClient) { }
createCustomer(customer: Customer) {
return this.http.post('customers', customer);
}
updateCustomer(customer: Customer) {
return this.http.put('customers/' + customer.id, customer);
}
patchCustomer(customer: Customer) {
return this.http.patch('customers/' + customer.id, customer);
}
deleteCustomer(customer: Customer) {
return this.http.delete('customers/' + customer.id);
}
}I metodi di scrittura hanno in comune la stessa firma dove il primo parametro è la stringa contenente l'url da invocare mentre il secondo parametro rappresenta l'oggetto da inviare al server. Il metodo di cancellazione invece è più simile al metodo get in quanto accetta solo l'url da invocare. Tuttavia, sia per i metodi di scrittura che per quelli di cancellazione e lettura, possiamo specificare un ulteriore parametro per personalizzare ulteriormente la chiamata.
Specificare parametri aggiuntivi
Quando effettuiamo una chiamata HTTP, la possiamo personalizzare aggiungendo intestazioni HTTP, oppure possiamo specificare il tipo dei dati di ritorno, o altro ancora. Queste funzionalità sono offerte dall'ultimo parametro, opzionale, dei metodi che abbiamo utilizzato nella sezione precedente. Questo parametro è un oggetto che ha le seguenti proprietà principali:
- headers: oggetto che contiene intestazioni HTTP da inviare al server;
- observe: decide quali eventi intercettare durante la chiamata. I valori possibili sono events, che si mette in ascolto di tutti gli eventi ed è il valore di default, e response che si mette in ascolto della sola risposta;
- responseType: specifica il tipo di dati che ci si aspetta dal server i valori possibili sono json, blob e text;
- reportProgress: specifica se inviare notifiche relative all'avanzamento della richiesta.
Nel codice sottostante vediamo un esempio di utilizzo di questo parametro.
searchCustomers() {
return this.http.get<Customer[]>('customers/list', { reportProgress: true });
}L'utilizzo di questi metodi è tutt'altro che complicato e, nella maggior parte dei casi, il codice che abbiamo visto è più che sufficiente per effettuare chiamate al server. Tuttavia effettuare la chiamata costituisce solo un lato della medaglia in quanto dobbiamo anche gestirne il risultato.
Gestire il risultato di una chiamata
Come detto in precedenza, l'oggetto restituito dai metodi che effettuano la chiamata al server è di tipo Observable<T> dove T è il tipo restituito. Observable è un tipo che fa parte della Reactive Extensions Library (RxJS) che è una delle poche dipendenze esterne di Angular. Questa classe non utilizza un pattern richiesta/risposta, bensì un pattern publish/subscribe dove il metodo che crea l'observable (il metodo get ad esempio) pubblica i dati ricevuti dal servizio e il subscriber li riceve. Nel nostro caso, il subscriber è il component che riceve i dati e li mostra sulla UI. Per sottoscriversi alla ricezione dei dati, dobbiamo utilizzare il metodo subscribe di Observable<T> passando in input la funzione da invocare che accetta in input i dati pubblicati.
this.customerService.searchCustomers().subscribe(c => {
this.handleCustomers(c);
})Il codice visto finora è la base per effettuare chiamate al server. Tuttavia, sono molti i casi che richiedono funzionalità più approfondite come l'intercettare la chiamata prima o dopo l'esecuzione, il tentare in automatico di rieffettuare la chiamata qualora fosse andata in errore, il manipolare dati non in formato JSON e altro ancora.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Disabilitare automaticamente un workflow di GitHub
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Usare una container image come runner di GitHub Actions
Applicare un filtro per recuperare alcune issue di GitHub
Gestire il colore CSS con HWB
Proteggere le risorse Azure con private link e private endpoints
Utilizzare il trigger SQL con le Azure Function
Generare velocemente pagine CRUD in Blazor con QuickGrid
Usare lo spread operator con i collection initializer in C#
Come migrare da una form non tipizzata a una form tipizzata in Angular
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Le novità di Angular: i miglioramenti alla CLI
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Il meglio della settimana
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub