< Angular

Angular HttpClient

Szerző: Sallai András

Copyright © 2024, Sallai András

Szerkesztve: 2024

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Összehasonlítás

Angular ES6 JavaScript
| |
v v
HttpClient fetch() XMLHttpRequest (XHR)
| |
v v
Observable Promise

Modul regisztrálása

Egy új importálásra is szükség van:

provideHttpClient

import { provideHttpClient } from '@angular/common/http'; //... export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideHttpClient() ] };

Szolgáltatás létrehozása

ng generate service shared/api

Szolgáltatás megírása

A konstruktorba paraméterként vegyük fel a http objektumot:

constructor(private http: HttpClient) { }
//... host = 'http://localhost:8000/api/'; //... getEmployees() { let endpoint = 'employees'; let url = this.host + endpoint; return this.http.get<any>(url); }

Hibakezelés

//... errorMessage: string = ''; //... this.api.addEmployee(emp).subscribe({ next: (data) => { console.log(data); }, error: (error) => { if (error.error && error.error.message) { // Ha a szerver egy JSON választ küldött 'message' kulccsal this.errorMessage = error.error.message; } else if (error.message) { // Ha van egy egyszerű üzenet az error objektumban this.errorMessage = error.message; } else { // Ha egyik sem, akkor egy általános hibaüzenetet jelenítünk meg this.errorMessage = 'Váratlan hiba történt a kérés során.'; } } });

A HTML oldalon megjelenítés:

@if(errorMessage) { <div class="error-message"> {{ errorMessage }} </div> }