HttpClient કેવી રીતે કામ કરે છે?

Question

Accepted Answer

**`HttpClient`** HTTP વિનંતી કરવા માટે Angular ની બિલ્ટ-ઇન સર્વિસ છે. તે **Observables** પરત કરે છે (Promises નહીં), RxJS ઑપરેટર સાથે સંકલિત થાય છે, અને ટાઇપ કરેલ પ્રતિક્રિયાઓ, ઇન્ટરસેપ્ટર્સ અને ભૂલ હેન્ડલિંગને સમર્થન આપે છે. ## મૂળ વપરાશ ```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}`); } } ``` જેનેરિક (``) પ્રતિક્રિયા ટાઇપ કરે છે. વિનંતીઓ **lazy** છે — તે ફક્ત સબ્સ્ક્રાઇબ કરવામાં આવે ત્યારે જ ચાલે છે. ## ઘટક માં વપરાશ કરો ```ts ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } // or with the async pipe (no manual subscribe/unsubscribe): users$ = this.userService.getUsers(); // template:

``` ## વિનંતી વિકલ્પો: 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}` }), }); ``` ## 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); ``` કારણ કે તે Observable-આધારિત છે, તમે ઑપરેટર સાથે પુનઃપ્રયાસ, ફોલબેક, ટાઇમાઉટ્સ અને રૂપાંતર બનાવો છો. ## ઇન્ટરસેપ્ટર્સ ક્રોસ-કટીંગ ચિંતાઓ સંભાળે છે ```text HTTP interceptors automatically attach auth tokens, log requests, handle errors globally, or show loading spinners — for ALL requests. ``` ## તે શા માટે મહત્વપૂર્ણ છે `HttpClient` એ Angular એપ્લિકેશન્સ બેકএન્ડ સાથે વાત કરે છે — ટાઇપ કરેલ, Observable-આધારિત, અને RxJS માટે પુનઃપ્રયાસ/ફોલબેક/રૂપાંતર સાથે કમ્પોઝેબલ. તેનો Observable પ્રકૃતિ (fetch's Promises વિરુદ્ધ) તેને Angular (async pipe, operators, interceptors) ના બાકીના ભાગ સાથે સંકલિત કરે છે. ટાઇપ કરેલ વિનંતીઓ, વિકલ્પો, ભૂલ હેન્ડલિંગ, અને `async` પાઇપ સાથે જોડાણ જાણવું વ્યવહારીક રીતે Angular માં તમામ ડેટા-ફેચિંગ જરૂરિયાતો કવર કરે છે.