Anfängerleitfaden zu Angular 4 HTTP

Im vorherigen Tutorial haben Sie gesehen, wie Sie Routing in Angular-Webanwendungen mithilfe von Angular-Routing implementieren. 

In diesem Lernprogramm erfahren Sie, wie Sie mithilfe von Angular über eine Angular-Anwendung mit Web-APIs und -Diensten kommunizieren HttpClient.

Angular HttpClient

Sie benutzen die XMLHttpRequest (XHR) Objekt, um serverseitige API-Aufrufe vom Browser aus durchzuführen. Das XHR Mit object können Sie einen Teil der Webseite aktualisieren, ohne die gesamte Seite neu laden zu müssen. Sie können Daten vom Server senden und empfangen, nachdem die Webseite geladen wurde.

Winkelig HttpClient bietet einen Wrapper für die XHR Objekt, wodurch es einfacher ist, API-Aufrufe über die Angular-Anwendung auszuführen. 

Aus der offiziellen Dokumentation:

Mit HttpClient, @ eckig / common / http Bietet eine vereinfachte API für HTTP-Funktionen zur Verwendung mit Angular-Anwendungen, die auf der XMLHttpRequest Schnittstelle, die von Browsern verfügbar gemacht wird. Zusätzliche Vorteile von HttpClient Testbarkeitsunterstützung, starke Typisierung von Request- und Response-Objekten, Request- und Response-Interceptor-Unterstützung sowie bessere Fehlerbehandlung über apis auf Basis von Observables.

Fertig machen

Sie beginnen mit dem Klonen des Quellcodes aus dem ersten Teil der Übungsreihe.

Git Klon https://github.com/royagasthyan/AngularComponent.git

Wenn Sie über den Quellcode verfügen, navigieren Sie zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.

cd AngularComponent npm installieren

Starten Sie nach der Installation der Abhängigkeiten die Anwendung, indem Sie den folgenden Befehl eingeben:

ng dienen

Sie sollten die Anwendung auf http: // localhost: 4200 / ausführen..

Um die HttpClient Modul in Ihrer Angular-Anwendung müssen Sie es zuerst in Ihre importieren app.module.ts Datei.

Navigieren Sie im Projektverzeichnis zu src / app / app.module.ts. In dem app.module.ts Datei, importieren Sie die HttpClientModule.

importiere HttpClientModule aus '@ angle / common / http';

Umfassen die HttpClientModule unter dem Einfuhrabschnitt.

Importe: [BrowserModule, FormsModule, HttpClientModule]

Hier ist wie das app.module.ts Datei sieht:

BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; import CalcComponent aus './calc/calc.component' import FormsModule aus '@ angle / forms'; importiere HttpClientModule aus '@ angle / common / http'; @NgModule (Deklarationen: [AppComponent, CalcComponent]) importiert: [BrowserModule, FormsModule, HttpClientModule], Provider: [], Bootstrap: [AppComponent]) Exportklasse AppModule  

Jetzt können Sie die verwenden HttpClientModule über die Angular-Anwendung durch Importieren in die bestimmte Angular-Komponente.

Erstellen der Winkelkomponente

Beginnen wir mit dem Erstellen der Winkelkomponente. Erstellen Sie einen Ordner mit dem Namen Daten empfangen in der src / app Mappe. Erstellen Sie eine Datei mit dem Namen get-data.component.ts und fügen Sie den folgenden Code hinzu:

Component aus '@ angle / core' importieren; @Component (Selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css']) export-Klasse GetDataComponent constructor ()  

Erstellen Sie eine Datei mit dem Namen get-data.component.html die als Vorlagendatei für die dienen würde Daten empfangen Komponente. Fügen Sie den folgenden Code für das hinzu get-data.component.html Datei:

 Datenkomponente abrufen 

Importieren Sie die GetDataComponent in dem src / app / app.module.ts Datei.

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

 Ergänzen Sie die GetDataComponent zum ngModule in dem app.module.ts. 

 Deklarationen: [AppComponent, CalcComponent, GetDataComponent]

So wird das modifiziert app.module.ts Datei sieht:

BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; import CalcComponent aus './calc/calc.component'; import GetDataComponent aus './get-data/get-data.component'; FormsModule aus '@ angle / forms' importieren; importiere HttpClientModule aus '@ angle / common / http'; @NgModule (Deklarationen: [AppComponent, CalcComponent, GetDataComponent]) importiert: [BrowserModule, FormsModule, HttpClientModule], Provider: [], Bootstrap: [AppComponent]) Exportklasse AppModule  

Ergänzen Sie die Daten empfangen Komponentenauswahl zum app.component.html Datei. So sieht es aus:

Speichern Sie die obigen Änderungen und starten Sie den Server. Sie können das sehen Daten empfangen Komponente, die angezeigt wird, wenn die Anwendung geladen wird.

Verwenden des Angular HttpClient-Moduls 

Sie werden das verwenden HttpClient Modul für API-Aufrufe. Erstellen Sie eine separate Datei, um einen Angular-Dienst für den Aufruf der API zu erstellen. Erstellen Sie eine Datei mit dem Namen get-data.service.ts Datei. Fügen Sie dem folgenden Code hinzu get-data.service.ts Datei:

import Injectable aus '@ angle / core'; @Injectable () Exportklasse GetDataService Konstruktor () 

Importieren Sie die HttpClient Modul zu den oben genannten GetDataService.

HttpClient aus '@ angle / common / http' importieren;

Initialisieren Sie die HttpClient in dem GetDataService Konstrukteur.

Konstruktor (privater http: HttpClient) 

Erstellen Sie eine aufgerufene Methode call_api einen GET-API-Aufruf in der GetDataService Datei. Sie verwenden eine Word Synonym Finder API, um den API-Aufruf durchzuführen. Hier ist wie das call_api Methode sieht aus:

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

Hier ist wie das get-data.service.ts Datei sieht:

import Injectable aus '@ angle / core'; HttpClient aus '@ angle / common / http' importieren; @Injectable () - Exportklasse GetDataService URL: String-Konstruktor (privater http: HttpClient) this.url = 'https://api.datamuse.com/words?ml=' call_api (term) return this.http. get (this.url + Begriff); 

Wie oben zu sehen GetDataService Klasse, die call_api Diese Methode gibt ein Observable zurück, für das Sie das Abonnement abonnieren können GetDataComponent.

Abonnieren von der GetDataComponentKonstruktor, Sie müssen die importieren GetDataService in dem GetDataComponent.

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

Definiere das GetDataService wie GetDataComponentAnbieter.

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

Lassen Sie uns vom abonnieren GetDataComponentKonstruktor-Methode. 

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

Hier ist wie das get-data.component.ts Datei sieht:

Component aus '@ angle / core' importieren; import GetDataService aus './get-data.service'; @Component (Selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'], provider: [GetDataService]) Exportklasse GetDataComponent Konstruktor (privater dataService: GetDataService) this.dataService.call_api ('Hallo'). subscribe (Antwort => console.log ('Antwort ist', Antwort);) 

Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Sie können das Ergebnis in der Browserkonsole protokollieren.

Im obigen Code haben Sie gesehen, wie Sie mithilfe von Angular eine GET-API-Anforderung erstellen HttpClient.

Um eine POST-Anfrage zu stellen, müssen Sie die http.post Methode.

this.http.post (url, key: value);

Wie im obigen Code gezeigt, müssen Sie die API-Post-URL und die zu veröffentlichenden Daten als zweiten Parameter angeben.

Fehler bei API-Aufrufen behandeln

Wenn Sie einen API-Aufruf ausführen, besteht die gleiche Wahrscheinlichkeit, dass ein Fehler auftritt. Um Fehler beim API-Aufruf zu behandeln, müssen Sie dem Fehler-Handler hinzufügen abonnieren Methode zusammen mit der Antwort Handler.

So sieht der modifizierte Code aus GetDataComponent sieht aus: 

Konstruktor (privater DatenService: GetDataService) this.dataService.call_api ('Hallo'). subscribe (Antwort => console.log ('Antwort ist', Antwort);, err => console.log ('Etwas ist gelaufen falsch ', err);)

Modifiziere den url Variable in der get-data.service.ts Datei, um eine nicht vorhandene URL zu erstellen, die beim Aufruf der API einen Fehler verursachen würde.

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

Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Überprüfen Sie die Browserkonsole. Die Fehlerbehandlungsmethode wird aufgerufen und der Fehler wird protokolliert.

Das Fehlerobjekt enthält alle Details zum Fehler, z. B. Fehlercode, Fehlernachricht usw. Es gibt einen tieferen Einblick in den Fehler des API-Aufrufs. So sieht das Browserkonsolenprotokoll aus:

Wie aus dem obigen Konsolenprotokoll hervorgeht, können alle Fehlerdetails vom Fehlerobjekt abgerufen werden.

Verpacken

In diesem Tutorial haben Sie gesehen, wie Sie das Angular verwenden können HttpClientModule API-Aufrufe durchführen. Sie haben gelernt, wie man die importiert HttpClientModule für die Anforderung von GET und POST an die Server-APIs. Sie haben gesehen, wie Sie Fehler beim Aufruf einer API behandeln.

Wie waren Ihre Erfahrungen mit dem Versuch, mit Angular API-Aufrufe durchzuführen HttpClientModule? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.