| جانب المقارنة | كائن الترويسات (`HttpHeaders`) | كائن المعلمات (`HttpParams`) |
|---|---|---|
| موقع التأثير في الطلب الشبكي | يُضاف ضمن ترويسات الأمان في الترويسة الرئيسية للطلب (`Request Headers`) | يُلحق مباشرة بنهاية رابط الـ URL على شكل استعلام (`Query Parameters`) |
| طبيعة التعامل مع البيانات | تحديد بيانات التوثيق (`Bearer Token`) ونوع المحتوى (`Content-Type`) | تحديد قيم التصفية، أرقام الصفحات، ومعلمات البحث |
في التطبيقات الحقيقية، لا يُرسل الطلب الشبكي بمفرده، بل يحتاج غالباً إلى إرفاق بيانات اعتماد التوثيق (Authorization Tokens) في رؤوس الطلبات (Headers)، أو تمرير معلمات البحث والتصفية (Query Parameters) عبر الرابط. يوفر أنجولر أدوات متقدمة وغير قابلة للتغيير (Immutable Objects) مثل HttpHeaders و HttpParams لإدارة هذه الإعدادات باحترافية.
صُممت كائنات التكوين لتكون ثابتة، حيث أن كل عملية تعديل أو إضافة تُنتج كائناً جديداً بالكامل لمنع التداخل البرمجي غير المخطط له.
يتكفل HttpParams بتحويل وترميز المعلمات النصية والعددية لتتوافق مع معايير روابط الويب وتجنب مشاكل الأحرف الخاصة.
| 1 | import { Component, OnInit, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-advanced-params-request', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="api-card"> |
| 11 | <h3>التعامل المتقدم مع رؤوس الطلبات والمعلمات</h3> |
| 12 | <p><strong>حالة جلب البيانات المخصصة:</strong> {{ statusText }}</p> |
| 13 | </div> |
| 14 | `, |
| 15 | styles: [` |
| 16 | .api-card { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; } |
| 17 | p { color: #38bdf8; } |
| 18 | `] |
| 19 | }) |
| 20 | export class AdvancedParamsRequestComponent implements OnInit { |
| 21 | statusText: string = 'جاري إعداد الطلب المعماري...'; |
| 22 | private http = inject(HttpClient); |
| 23 | |
| 24 | ngOnInit(): void { |
| 25 | // 1. بناء رؤوس الطلب (Headers) |
| 26 | const headers = new HttpHeaders() |
| 27 | .set('Authorization', 'Bearer mock-jwt-token-secure') |
| 28 | .set('Content-Type', 'application/json'); |
| 29 | |
| 30 | // 2. بناء معلمات البحث (Query Parameters) |
| 31 | const params = new HttpParams() |
| 32 | .set('_page', '1') |
| 33 | .set('_limit', '5'); |
| 34 | |
| 35 | // 3. إرسال الطلب مدمجاً بالترويسات والمعلمات |
| 36 | this.http.get('https://jsonplaceholder.typicode.com/posts', { headers, params }) |
| 37 | .subscribe({ |
| 38 | next: (data) => { |
| 39 | this.statusText = 'تم استلام البيانات بنجاح باستخدام الترويسات والمعلمات!'; |
| 40 | console.log('البيانات المستلمة بمعلمات متقدمة:', data); |
| 41 | }, |
| 42 | error: (err) => { |
| 43 | this.statusText = 'فشل الطلب الشبكي.'; |
| 44 | console.error(err); |
| 45 | } |
| 46 | }); |
| 47 | } |
| 48 | } |
⚠️ تحذير
تذكر أن كائنات HttpHeaders و HttpParams غير قابلة للتغيير (Immutable)! هذا يعني أن استدعاء .set() لا يقوم بتعديل الكائن الحالي، بل يُنشئ نسخة جديدة تحتوي على التعديل؛ ولهذا يجب عليك دائماً إسناد الناتج إلى متغير جديد أو ربط العمليات ببعضها.