كيف يعمل HttpClient؟

Question

Accepted Answer

**`HttpClient`** هي خدمة Angular المدمجة لإرسال طلبات HTTP. تُرجع **Observables** (وليس Promises)، وتتكامل مع معاملات RxJS، وتدعم الاستجابات المكتوبة والـ interceptors ومعالجة الأخطاء. ## الاستخدام الأساسي ```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}`); } } ``` الأنواع العامة (``) تحدد نوع الاستجابة. الطلبات **كسولة** — تُنفَّذ فقط عند الاشتراك. ## الاستهلاك في مكون ```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 مع backends — مكتوبة وقائمة على Observable وقابلة للتكوين مع RxJS للمحاولات/البدائل/التحويلات. طبيعة Observable (مقابل Promises الخاصة بـ fetch) تدمجها مع بقية Angular (async pipe والمعاملات والمعترضات). معرفة الطلبات المكتوبة والخيارات ومعالجة الأخطاء والاقتران مع `async` pipe تغطي فعليًا جميع احتياجات جلب البيانات في Angular.