HttpClient on Angularin sisäänrakennettu palvelu HTTP-pyyntöjen tekemiseen. Se palauttaa Observables-objekteja (ei Promises), integroituu RxJS-operaattoreihin ja tukee tyypitettyjä vasteita, interceptoreita ja virheen käsittelyä.
Peruskäyttö
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
@Injectable({ providedIn: "root" })
export class UserService {
constructor(private http: HttpClient) {}
getUsers() {
return this.http.get<User[]>("/api/users"); // typed: Observable<User[]>
}
createUser(user: User) {
return this.http.post<User>("/api/users", user); // body as 2nd arg
}
deleteUser(id: number) {
return this.http.delete(`/api/users/${id}`);
}
}
Geneerinen tyyppi (<User[]>) tyypittää vastauksen. Pyynnöt ovat laiskoja — ne suoritetaan vain kun tilaat.
Kulutus komponentissa
ngOnInit() {
this.userService.getUsers().subscribe(users => this.users = users);
}
// or with the async pipe (no manual subscribe/unsubscribe):
users$ = this.userService.getUsers();
// template: <li *ngFor="let u of users$ | async">
Pyynnön vaihtoehdot: params, headers
import { HttpParams, HttpHeaders } from "@angular/common/http";
this.http.get("/api/users", {
params: new HttpParams().set("page", "1").set("limit", "10"), // ?page=1&limit=10
headers: new HttpHeaders({ Authorization: `Bearer ${token}` }),
});
Virheen käsittely RxJS:n kanssa
import { catchError, retry } from "rxjs/operators";
import { of } from "rxjs";
this.http.get<User[]>("/api/users").pipe(
retry(2), // retry failed requests twice
catchError(err => {
console.error(err);
return of([]); // fallback value, keep the stream alive
})
).subscribe(users => this.users = users);
Koska se perustuu Observables-objekteihin, voit koostaa uudelleenyritykset, varasuunnitelmat, aikakatkaistut ja muunnokset operaattoreiden kanssa.
Interceptorit käsittelevät ylittävät huolenaiheet
HTTP interceptors automatically attach auth tokens, log requests,
handle errors globally, or show loading spinners — for ALL requests.
Miksi se on tärkeää
HttpClient on tapa, jolla Angular-sovellukset keskustelevat backendin kanssa — tyypitetty, Observable-pohjainen ja sävellettävä RxJS:n kanssa uudelleenyrityksille/varasuunnitelmille/muunnoksille.
Sen Observable-luonne (verrattuna fetch-promise-objekteihin) integroi sen loput Angular-sovellukseen (async pipe, operaattorit, interceptorit).
Typitettyjen pyyntöjen, vaihtoehtojen, virheen käsittelyn ja async pipe-yhdistelmän tunteminen kattaa käytännöllisesti katsoen kaikki tiedon hakemisen tarpeet Angularissa.
