HttpClient کیسے کام کرتا ہے؟

Question

Accepted Answer

**`HttpClient`** Angular کی HTTP requests بھیجنے کی لیے بنی ہوئی service ہے۔ یہ **Observables** واپس کرتا ہے (Promises نہیں)، RxJS operators کے ساتھ integrate ہوتا ہے، اور typed responses، interceptors، اور error handling کو سپورٹ کرتا ہے۔ ## بنیادی استعمال ```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}`); } } ``` عام (``) response کو type کرتا ہے۔ Requests **lazy** ہیں — یہ صرف تب چلتی ہیں جب subscribe کیا جائے۔ ## 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}` }), }); ``` ## RxJS کے ساتھ error handling ```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 پر مبنی ہے، آپ retries، fallbacks، timeouts، اور transforms کو operators کے ساتھ compose کر سکتے ہیں۔ ## Interceptors cross-cutting concerns کو handle کرتے ہیں ```text HTTP interceptors automatically attach auth tokens, log requests, handle errors globally, or show loading spinners — for ALL requests. ``` ## یہ کیوں اہم ہے `HttpClient` وہ طریقہ ہے جس سے Angular apps backends سے بات کرتے ہیں — typed، Observable پر مبنی، اور RxJS کے ساتھ retries/fallbacks/transformations کے لیے composable۔ اس کی Observable nature (fetch کے Promises کے مقابل) اسے Angular کے باقی حصوں کے ساتھ integrate کرتی ہے (async pipe، operators، interceptors)۔ Typed requests، options، error handling، اور `async` pipe کے ساتھ pairing جاننا عملی طور پر Angular میں تمام data-fetching کی ضروریات کو cover کرتا ہے۔