Piye carane HttpClient bisa makarya?

Question

Accepted Answer

**`HttpClient`** minangka layanan built-in Angular kanggo nggawe HTTP requests. Iku mengembalikan **Observables** (ora Promises), integrasi karo RxJS operators, lan ndhukung typed responses, interceptors, lan error handling. ## Panganggone dasar ```ts 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("/api/users"); // typed: Observable } createUser(user: User) { return this.http.post("/api/users", user); // body as 2nd arg } deleteUser(id: number) { return this.http.delete(`/api/users/${id}`); } } ``` Generic (``) ngatur tipe response. Requests iku **lazy** — mung bisa execute nalika di-subscribe. ## Ngonsumsi ing component ```ts ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } // or with the async pipe (no manual subscribe/unsubscribe): users$ = this.userService.getUsers(); // template:

``` ## Request options: params, headers ```ts 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}` }), }); ``` ## Error handling karo RxJS ```ts import { catchError, retry } from "rxjs/operators"; import { of } from "rxjs"; this.http.get("/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); ``` Amarga Observable-based, sampeyan bisa nggabung retries, fallbacks, timeouts, lan transforms karo operators. ## Interceptors nangani cross-cutting concerns ```text HTTP interceptors automatically attach auth tokens, log requests, handle errors globally, or show loading spinners — for ALL requests. ``` ## Kenapa iki penting `HttpClient` minangka cara Angular apps ngomong karo backends — typed, Observable-based, lan composable karo RxJS kanggo retries/fallbacks/transformations. Sifate Observable (versus fetch's Promises) integrasi karo sisa Angular (async pipe, operators, interceptors). Nyataning typed requests, options, error handling, lan pairing karo `async` pipe nutupi praktis kabeh kebutuhan data-fetching ing Angular.