• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

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

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

• provideHttpClient

src/app/app.config.ts

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

ng generate service shared/api

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

src/app/shared/api.service.ts

  constructor(private http: HttpClient) { }

src/app/shared/api.service.ts

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

//...
  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>
}