Ghidul începătorului pentru unghiul 4 HTTP

În tutorialul anterior, ați văzut cum să implementați rutarea în aplicațiile web angulare folosind rutarea Angular. 

În acest tutorial, veți învăța cum să comunicați cu API-uri și servicii web dintr-o aplicație Angular folosind Angular httpclient.

Angular HttpClient

Folosiți XMLHttpRequest (XHR) obiect pentru a efectua apeluri API de pe server de la browser. XHR obiect face posibilă actualizarea unei porțiuni a paginii web fără reîncărcarea întregii pagini. Puteți trimite și primi date de la server după încărcarea paginii web.

unghiular httpclient oferă un înveliș pentru XHR obiect, făcând mai ușor efectuarea de apeluri API din aplicația Angular. 

Din documentația oficială:

Cu httpclient, @ Unghiular / comun / http oferă un API simplificat pentru funcționalitatea HTTP pentru utilizarea cu aplicații Angulare, construit pe partea de sus a XMLHttpRequest interfața expusă de browsere. Beneficiile suplimentare ale httpclient include suportul pentru testare, tastarea puternică a obiectelor de solicitare și de răspuns, suportul de interceptare a solicitărilor și a răspunsului și o mai bună gestionare a erorilor prin apis bazat pe observații.

Noțiuni de bază

Veți începe prin clonarea codului sursă din prima parte a seriei tutorial.

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

Odată ce aveți codul sursă, navigați la directorul proiectului și instalați dependențele necesare.

cd AngularComponent npm instalare

După instalarea dependențelor, porniți aplicația tastând următoarea comandă:

ng servi

Ar trebui să aveți aplicația care rulează pe http: // localhost: 4200 /.

Pentru a utiliza httpclient modul în aplicația dvs. Angular, trebuie să îl importați mai întâi în dvs. app.module.ts fişier.

Din directorul de proiect, navigați la src / app / app.module.ts. În app.module.ts fișier, importați HttpClientModule.

import HttpClientModule de la '@ angular / common / http';

Includeți HttpClientModule în secțiunea importuri.

importurile: [BrowserModule, FormsModule, HttpClientModule]

Iată cum app.module.ts file looks:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CalcComponent din './calc/calc.component' import FormsModule din '@ unghiular / formulare'; import HttpClientModule de la '@ angular / common / http'; @NgModule (declarații: [AppComponent, CalcComponent], import: [BrowserModule, FormsModule, HttpClientModule], furnizori: [], bootstrap: [AppComponent]) 

Acum veți putea să utilizați HttpClientModule prin aplicația Angular, importând-o în componenta Angulară specială.

Crearea componentei unghiulare

Să începem prin crearea componentei Angulare. Creați un dosar numit Obțineți date în interiorul src / app pliant. Creați un fișier numit get-data.component.ts și adăugați următorul cod:

import Component de la '@ angular / core'; @Component (selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css']) clasa de export GetDataComponent constructor ()  

Creați un fișier numit get-data.component.html care ar servi ca fișier de șablon pentru Obțineți date componentă. Adăugați următorul cod pentru get-data.component.html fişier:

 Obțineți componenta de date 

Importați GetDataComponent în src / app / app.module.ts fişier.

import GetDataComponent de la "./get-data/get-data.component";

 Adaugă GetDataComponent la ngModule în app.module.ts. 

 declarații: [AppComponent, CalcComponent, GetDataComponent]

Iată cum a fost modificat app.module.ts file looks:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CalcComponent din "./calc/calc.component"; import GetDataComponent de la "./get-data/get-data.component"; import FormsModule din '@ unghiular / formulare'; import HttpClientModule de la '@ angular / common / http'; @NgModule (declarații: [AppComponent, CalcComponent, GetDataComponent], import: [BrowserModule, FormsModule, HttpClientModule], furnizori: [], bootstrap: [AppComponent]) 

Adaugă Obțineți date selector de componente la app.component.html fişier. Iată cum arată:

Salvați modificările de mai sus și porniți serverul. Veți putea vizualiza Obțineți date componentă afișată când se încarcă aplicația.

Utilizând modulul HttpClient Angular 

Veți utiliza httpclient modul de a efectua apeluri API. Să creați un fișier separat pentru a crea un serviciu Angular pentru efectuarea apelului API. Creați un fișier numit get-data.service.ts fişier. Adăugați următorul cod la get-data.service.ts fişier:

import Injectable de la '@ angular / core'; @Injectable () clasa de export GetDataService constructor () 

Importați httpclient modul de mai sus GetDataService.

import HttpClient de la '@ angular / common / http';

Inițializați httpclient în GetDataService constructor.

constructor (privat http: HttpClient) 

Creați o metodă numită call_api pentru a efectua un apel GET API în GetDataService fişier. Veți utiliza un API pentru căutare sinonim cu cuvânt pentru a efectua apelul API. Iată cum call_api metoda arată:

call_api (termen) return this.http.get (acest.url + termen); 

Iată cum get-data.service.ts file looks:

import Injectable de la '@ angular / core'; import HttpClient de la '@ angular / common / http'; @Instructabil () de clasă de export GetDataService url: string constructor (private http: HttpClient) this.url = 'https://api.datamuse.com/words?ml=' call_api (termen) return this.http. obține (acest.url + termen); 

După cum se vede în cele de mai sus GetDataService clasa, call_api metoda returnează o observabilă la care vă puteți abona de la GetDataComponent.

Pentru a vă abona de la GetDataComponentconstructor, trebuie să importați GetDataService în GetDataComponent.

import GetDataService de la "./get-data.service";

Definiți GetDataService la fel de GetDataComponentfurnizor.

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

Să ne abonați de la GetDataComponent's constructor. 

constructor (private dataService: GetDataService) this.dataService.call_api ('hello') subscribe (răspuns => console.log ('Răspuns este', răspuns);)

Iată cum get-data.component.ts file looks:

import Component de la '@ angular / core'; import GetDataService de la "./get-data.service"; @Component (selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'], furnizori: [GetDataService] (private dataService: GetDataService) this.dataService.call_api ('hello'). subscribe (răspuns => console.log ('răspuns este', răspuns);) 

Salvați modificările de mai sus și reporniți serverul. Veți putea vedea rezultatul înregistrat în consola browserului.

În codul de mai sus, ați văzut cum să faceți o cerere GET API folosind unghiul httpclient.

Pentru a face o cerere POST, trebuie să utilizați http.post metodă.

this.http.post (url, cheie: valoare);

Așa cum se vede în codul de mai sus, trebuie să furnizați URL-ul postului API și datele care urmează să fie postate ca al doilea parametru.

Efectuarea erorilor în timp ce efectuați apeluri API

Ori de câte ori efectuați un apel API, există o posibilitate egală de a întâlni o eroare. Pentru a gestiona erorile la efectuarea unui apel API, trebuie să adăugați un handler de eroare la Abonati-va împreună cu raspuns manipulant.

Iată cum codul modificat din GetDataComponent arată: 

constructor (private dataService: GetDataService) this.dataService.call_api ('hello') subscribe (răspuns => console.log ('Response is', răspuns); greșit ", err);

Modificați URL-ul variabilă în get-data.service.ts fișier pentru a crea o adresă URL inexistentă care ar provoca o eroare la efectuarea apelului API.

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

Salvați modificările de mai sus și reporniți serverul. Verificați consola browserului și veți fi chemat metoda de gestionare a erorilor și va fi înregistrată eroarea.

Obiectul de eroare conține toate detaliile despre eroare, cum ar fi codul de eroare, mesajul de eroare etc. Oferă o imagine mai aprofundată asupra a ceea ce a mers prost cu apelul API. Iată cum arată jurnalul consolei browserului:

După cum se vede în jurnalul consolei de mai sus, toate detaliile de eroare pot fi obținute din obiectul de eroare.

Înfășurați-o

În acest tutorial, ați văzut cum să utilizați unghiul HttpClientModule pentru a efectua apeluri API. Ai învățat cum să imporți HttpClientModule pentru a face cererile GET și POST la API-urile serverului. Ați văzut cum să faceți față erorilor atunci când efectuați un apel API.

Cum a încercat experiența dvs. să învețe cum să efectuați apeluri API utilizând unghiular HttpClientModule? Spuneți-ne gândurile dvs. în comentariile de mai jos.

Codul sursă din acest tutorial este disponibil pe GitHub.