TypeScript calls a get method from a web API service through the HttpClient class

In questo mini articolo, vedremo come utilizzare nella tecnologia Angular, ed in particolar nel linguaggio di programmazione TypeScript, la classe HttpClient, per fare richieste ai servizi web api.

In un progetto Angular con TypeScript, nel file app.module.ts, aggiungiamo il riferimento a httpclientmodule.

Di seguito si riporta il frammento di codice per la dichiarazione del modulo http.

TypeScript

import { HttpClientModule } from '@angular/common/http';

 

Sempre nel file app.module.ts, nella parte "Imports" aggiungiamo la classe "HttpClientModule", il tutto come mostrato qui di seguito:

TypeScript

 imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

 

Terminate queste modifiche, passiamo alla pagina o meglio component, dove verrà richiamato il servizio.

Aggiungiamo il riferimento ad http, in alto ad ogni dichiarazione importiamo tale riferimento.

Di seguito si riporta il frammento di tale dichiarazione.

TypeScript

import {HttpClient } from '@angular/common/http';

 

Nel costruttore del componente, si crea il riferimento alla classe httpClient, che sarà utilizzato in un metodo per richiamare il servizio.

Di seguito il frammento di codice relativo alla dichiarazione di variabile nel costruttore.

TypeScript

  constructor(

    private http: HttpClient

) { }

 

Tramite il metodo get della classe http, richiamiamo il metodo del servizio web api, che in questo esempio si chiama "Anagraficas".

Di seguito il frammento di codice delle suddette operazioni.

TypeScript

 getDati(): Observable<any> {

  return this.http.get<any>('http://localhost:5135/api/Anagraficas');

}

 

Siamo giunti alla fine della stesura del codice, l'ultima modifica da fare è richiamare il metodo appena creato. Nell'evento "ngOnInit" del componente, richiamiamo il metodo "getDati".

Di seguito si riporta il frammento di codice di tale operazione.

TypeScript

ngOnInit(): void {

 

   var risultato =  this.getDati();

    risultato.subscribe(p=>{

      console.log(p);

   });

 

}

 

 

Conclusioni

Questo mini articolo, ha voluto illustrare una tecnica per richiamare un servizio webapi, in particolar modo un metodo "Get" tramite la classe "httpClient". Tante sono le tecniche e le classi che possiamo utilizzare per gestire i servizi web con il linguaggio di programmazione TypeScript .