TypeScript richiamare un metodo get da un servizio web api tramite la classe HttpClient

Quando si usa la tecnologia Angular, con il linguaggio di programmazione TypeScript, può capitare di gestire i dati tramite servizi web api.

In questo esempio di codice, vediamo come richiamare un metodo get di un servizio web api tramite la classe HTTPClient.

Dopo aver creato un progetto Angular con TypeScript, oppure in uno esistente, nel file app.module.ts, dobbiamo aggiungere 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" l'aggiunta del "HttpClientModule".

TypeScript 

 imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

 

Ora fatte 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, richiamiamo il metodo del servizio web api.

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'ultimo esempio. 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

In questo mini articoli, abbiamo visto come 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 .