HttpClient inafanya kazi vipi?

Question

Accepted Answer

**`HttpClient`** ni huduma ya ndani ya Angular kwa kumfanya ombi la HTTP. Inarudisha **Observables** (si Promises), inajenga na waendeshaji wa RxJS, na inaauni majibu ya kupewa aina, kuzuia, na kushughulikia makosa. ## Matumizi ya msingi ```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}`); } } ``` Jineri (``) inatoa aina ya jibu. Maombi ni **lazy** — yanayanzishwa tu wakati una inakubali. ## Kumkamata katika sehemu ```ts ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } // or with the async pipe (no manual subscribe/unsubscribe): users$ = this.userService.getUsers(); // template:

``` ## Chaguzi za ombi: vigezo, kichwa ```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}` }), }); ``` ## Kushughulikia hitilafu na 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); ``` Kwa sababu inatokana na Observable, unaunganisha majaribio ya upya, mabadiliko, muda, na mabadiliko na waendeshaji. ## Kuzuia kushughulikia matatizo ya kupitia ```text HTTP interceptors automatically attach auth tokens, log requests, handle errors globally, or show loading spinners — for ALL requests. ``` ## Kwa nini ni muhimu `HttpClient` ni jinsi ambavyo programu za Angular zinaongea na backends — kupewa aina, iliyotokana na Observable na inayoweza kuundwa na RxJS kwa majaribio ya upya/mabadiliko/mabadiliko. Asili yake ya Observable (kwa kulinganisha na Promises za fetch) inaunganisha kwa sehemu nyingine ya Angular (async pipe, waendeshaji, kuzuia). Kujua ombi la kupewa aina, chaguzi, kushughulikia makosa, na kuunganisha na `async` pipe inafunika kwa kweli mahitaji yote ya kupokea data katika Angular.