Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > Angular

Effettuare chiamate Ajax con Angular

di Stefano MostardaStefano Mostarda, in 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.

2 pagine in totale: 1 2
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

Le novità di Entity Framework (Core) 7

I più letti di oggi

In evidenza

Misc