Guida per principianti a Angular 4 HTTP

Nel tutorial precedente, hai visto come implementare il routing in applicazioni Web angolari utilizzando il routing angolare. 

In questo tutorial, imparerai come comunicare con le API Web e i servizi da un'applicazione Angolare utilizzando Angular HttpClient.

HttpClient angolare

Tu usi il XMLHttpRequest (XHR) oggetto di effettuare chiamate API sul lato server dal browser. Il XHR oggetto rende possibile aggiornare una parte della pagina web senza ricaricare l'intera pagina. È possibile inviare e ricevere dati dal server una volta caricata la pagina Web.

Angolare HttpClient fornisce un wrapper per il XHR oggetto, rendendo più facile effettuare chiamate API dall'applicazione Angular. 

Dalla documentazione ufficiale:

Con HttpClient, @ Angolare / common / http fornisce un'API semplificata per la funzionalità HTTP da utilizzare con le applicazioni Angular, basandosi sulla XMLHttpRequest interfaccia esposta dai browser. Ulteriori vantaggi di HttpClient include supporto per testabilità, forte tipizzazione di oggetti di richiesta e risposta, supporto per interceptor di richieste e risposte e migliore gestione degli errori tramite apis basato su Observables.

Iniziare

Inizierai clonando il codice sorgente dalla prima parte della serie di tutorial.

git clone https://github.com/royagasthyan/AngularComponent.git

Una volta ottenuto il codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.

cd AngularComponent npm install

Dopo aver installato le dipendenze, avviare l'applicazione digitando il seguente comando:

ng servire

Dovresti avere l'applicazione in esecuzione su http: // localhost: 4200 /.

Per usare il HttpClient modulo nella tua applicazione Angular, devi prima importarlo nel tuo app.module.ts file.

Dalla directory del progetto, vai a src / app / app.module.ts. Nel app.module.ts file, importa il HttpClientModule.

import HttpClientModule da '@ angular / common / http';

Includi il HttpClientModule sotto la sezione delle importazioni.

importazioni: [BrowserModule, FormsModule, HttpClientModule]

Ecco come app.module.ts aspetto del file:

importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; import CalcComponent da './calc/calc.component' import FormsModule da '@ angular / forms'; import HttpClientModule da '@ angular / common / http'; @NgModule (dichiarazioni: [AppComponent, CalcComponent], importa: [BrowserModule, FormsModule, HttpClientModule], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule  

Ora sarai in grado di usare il HttpClientModule attraverso l'applicazione Angolare importandola nel particolare componente Angolare.

Creazione del componente angolare

Iniziamo creando il componente Angolare. Crea una cartella chiamata get-dati dentro il src / app cartella. Crea un file chiamato get-data.component.ts e aggiungi il seguente codice:

importare Component da '@ angular / core'; @Component (selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css']) classe di esportazione GetDataComponent costruttore ()  

Crea un file chiamato get-data.component.html che servirebbe da modello per il file get-dati componente. Aggiungere il seguente codice per il get-data.component.html file:

 Ottieni dati componente 

Importa il GetDataComponent nel src / app / app.module.ts file.

import GetDataComponent da './get-data/get-data.component';

 Aggiungi il GetDataComponent al ngModule nel app.module.ts. 

 dichiarazioni: [AppComponent, CalcComponent, GetDataComponent]

Ecco come è stato modificato app.module.ts aspetto del file:

importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; import CalcComponent da './calc/calc.component'; import GetDataComponent da './get-data/get-data.component'; import FormsModule da '@ angular / forms'; import HttpClientModule da '@ angular / common / http'; @NgModule (dichiarazioni: [AppComponent, CalcComponent, GetDataComponent], importa: [BrowserModule, FormsModule, HttpClientModule], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule  

Aggiungi il get-dati selettore di componenti al app.component.html file. Ecco come appare:

Salvare le modifiche precedenti e avviare il server. Sarai in grado di visualizzare il get-dati componente visualizzato al caricamento dell'applicazione.

Utilizzando il modulo HttpClient angolare 

Userai il HttpClient modulo per effettuare chiamate API. Creiamo un file separato per creare un servizio angolare per effettuare la chiamata API. Crea un file chiamato get-data.service.ts file. Aggiungi il seguente codice al get-data.service.ts file:

import Injectable da '@ angular / core'; @Injectable () classe di esportazione GetDataService costruttore () 

Importa il HttpClient modulo a quanto sopra GetDataService.

importare HttpClient da '@ angular / common / http';

Inizializza il HttpClient nel GetDataService costruttore.

costruttore (http: HttpClient privato) 

Crea un metodo chiamato call_api effettuare una chiamata API GET in GetDataService file. Utilizzerai una parola sinonimo di finder API per effettuare la chiamata API. Ecco come call_api aspetto del metodo:

call_api (term) return this.http.get (this.url + term); 

Ecco come get-data.service.ts aspetto del file:

import Injectable da '@ angular / core'; importare HttpClient da '@ angular / common / http'; @Injectable () classe di esportazione GetDataService url: costruttore di stringhe (http: HttpClient privato) this.url = 'https://api.datamuse.com/words?ml=' call_api (term) return this.http. get (this.url + term); 

Come visto in precedenza GetDataService classe, il call_api metodo restituisce un osservabile al quale puoi iscriverti dal GetDataComponent.

Per iscriversi dal GetDataComponentCostruttore, è necessario importare il GetDataService nel GetDataComponent.

import GetDataService da './get-data.service';

Definire il GetDataService come GetDataComponentil fornitore.

@Component (selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'], provider: [GetDataService])

Abboniamoci al GetDataComponentIl metodo di costruzione. 

costruttore (private dataService: GetDataService) this.dataService.call_api ('hello'). subscribe (response => console.log ('Response is', response);)

Ecco come get-data.component.ts aspetto del file:

importare Component da '@ angular / core'; import GetDataService da './get-data.service'; @Component (selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'], provider: [GetDataService]) classe di esportazione GetDataComponent costruttore (private dataService: GetDataService) this.dataService.call_api ('hello'). subscribe (response => console.log ('Response is', response);) 

Salvare le modifiche precedenti e riavviare il server. Sarai in grado di vedere il risultato registrato nella console del browser.

Nel codice precedente, hai visto come eseguire una richiesta API GET utilizzando Angular HttpClient.

Per fare una richiesta POST, è necessario utilizzare il http.post metodo.

this.http.post (url, chiave: valore);

Come visto nel codice precedente, è necessario fornire l'URL del post dell'API e i dati da pubblicare come secondo parametro.

Gestione degli errori durante le chiamate API

Ogni volta che si effettua una chiamata API, c'è una possibilità uguale di incontrare un errore. Per gestire gli errori quando si effettua una chiamata API, è necessario aggiungere un gestore degli errori a sottoscrivi metodo insieme al risposta gestore.

Ecco come il codice modificato dal GetDataComponent sembra: 

costruttore (private dataService: GetDataService) this.dataService.call_api ('hello'). subscribe (response => console.log ('Response is', response);, err => console.log ('Qualcosa è andato sbagliato ', errare);)

Modifica il url variabile nel get-data.service.ts file per creare un URL inesistente che causerebbe un errore quando si effettua la chiamata API.

this.url = 'https://ai.datamuse.com/words?ml='

Salvare le modifiche precedenti e riavviare il server. Controlla la console del browser e avrai il metodo di gestione degli errori chiamato e l'errore registrato.

L'oggetto error contiene tutti i dettagli sull'errore come il codice di errore, il messaggio di errore, ecc. Fornisce una visione più approfondita di ciò che è andato storto con la chiamata API. Ecco come appare il log della console del browser:

Come si vede nel precedente log della console, tutti i dettagli dell'errore possono essere ottenuti dall'oggetto error.

Avvolgendolo

In questo tutorial hai visto come utilizzare l'angolare HttpClientModule per effettuare chiamate API. Hai imparato come importare il HttpClientModule per fare la richiesta GET e POST alle API del server. Hai visto come gestire gli errori quando fai una chiamata API.

In che modo la tua esperienza ha provato a imparare come effettuare chiamate API utilizzando Angular HttpClientModule? Fateci sapere i vostri pensieri nei commenti qui sotto.

Il codice sorgente di questo tutorial è disponibile su GitHub.