| نوع الاستجابة (`Response Type`) | آلية العمل الهندسي | متى يتم استخدامها في التطبيقات |
|---|---|---|
| البيانات الجسمية فقط (`body`) | إرجاع البيانات الفعلية مباشرة كتدفق (الافتراضي) | عند الحاجة السريعة لمحتوى البيانات دون بيانات ترويسة الحدث |
| الاستجابة الكاملة (`events`) | إرجاع كافة تفاصيل الحدث بما فيها حالة التقدم والترويسة (`Headers`) | عند الحاجة لتتبع حالة التحميل اللحظية أو قراءة ترويسات الاستجابة الخاصة |
يُعد استدعاء البيانات باستخدام طلبات القراءة (GET Requests) الأساس لأي تطبيق تفاعلي يعتمد على الخوادم الخارجية. في Angular 22.1، يتم استغلال الأنواع الصارمة في تايبسكريبت (TypeScript Generics) لتحديد شكل البيانات القادمة بدقة، مما يمنع الأخطاء البرمجية ويوفر حماية كاملة للمطور أثناء بناء واجهات المستخدم.
استخدام الأنواع البرمجية يضمن أن المتغيرات المستقبلية تحمل الخصائص الصحيحة تماماً كما صممها الخادم، مما يمنع ظهور أخطاء Undefined أثناء وقت التشغيل.
طلبات HttpClient لا تُنفذ فعلياً إلا عند تفعيل الاشتراك (Subscription) عليها، وهو ما يتولاه مشغل الأنبوب async في قوالب واجهة المستخدم بكفاءة تامة.
| 1 | import { Component, OnInit, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { HttpClient } from '@angular/common/http'; |
| 4 | import { Observable } from 'rxjs'; |
| 5 | |
| 6 | interface UserProfile { |
| 7 | id: number; |
| 8 | name: string; |
| 9 | email: string; |
| 10 | } |
| 11 | |
| 12 | @Component({ |
| 13 | selector: 'app-user-list-fetch', |
| 14 | standalone: true, |
| 15 | imports: [CommonModule], |
| 16 | template: ` |
| 17 | <div class="api-card"> |
| 18 | <h3>قائمة المستخدمين المستلمة عبر GET Request</h3> |
| 19 | <ul> |
| 20 | <li *ngFor="let user of users$ | async"> |
| 21 | <strong>{{ user.name }}</strong> - {{ user.email }} |
| 22 | </li> |
| 23 | </ul> |
| 24 | </div> |
| 25 | `, |
| 26 | styles: [` |
| 27 | .api-card { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; } |
| 28 | ul { color: #94a3b8; padding-right: 20px; } |
| 29 | li { color: #38bdf8; margin: 6px 0; } |
| 30 | `] |
| 31 | }) |
| 32 | export class UserListFetchComponent implements OnInit { |
| 33 | private http = inject(HttpClient); |
| 34 | users$!: Observable<UserProfile[]>; |
| 35 | |
| 36 | ngOnInit(): void { |
| 37 | // إرسال طلب GET مع تحديد النمط النوعي للبيانات المستلمة |
| 38 | this.users$ = this.http.get<UserProfile[]>('https://jsonplaceholder.typicode.com/users'); |
| 39 | } |
| 40 | } |
⚠️ تحذير
تذكر أن طلبات HttpClient في أنجولر تتميز بأنها "باردة" (Cold Observables)! هذا يعني أن الطلب لن يتم إرساله فعلياً إلى الخادم إلا إذا قام المكون بعمل subscribe (أو استخدام أداة البث مثل | async في القالب)، وإلا فلن يتم تنفيذ أي اتصال شبكي.