szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular HttpClient ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Összehasonlítás =====


<code>
 Angular                ES6          JavaScript
    |                    |
    v                    v
HttpClient            fetch()      XMLHttpRequest (XHR)
    |                    |
    v                    v         
Observable            Promise
</code>



===== Modul regisztrálása =====

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

  * provideHttpClient

<code javascript src/app/app.config.ts>
import { provideHttpClient } from '@angular/common/http';

//...
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};
</code>

===== 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:
<code javascript src/app/shared/api.service.ts>
  constructor(private http: HttpClient) { }
</code>

<code javascript 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);
  }
</code>

===== Hibakezelés =====

<code javascript>
//...
  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.';
        }
      }        
      
    });
</code>

A HTML oldalon megjelenítés:
<code html>
@if(errorMessage) {
  <div class="error-message">
    {{ errorMessage }}
  </div>
}
</code>