عميل HTTP في Angular

يتناول هذا الدرس استخدام HTTP Client في Angular للتواصل مع واجهات API، مما يتيح لكم جلب البيانات وإرسالها بسهولة.

ما هو HTTP Client؟

HTTP Client هو وحدة Angular المضمّنة للتواصل مع خدمات الواجهة الخلفية من خلال طلبات HTTP.

استيراد HttpClientModule

استوردوا HttpClientModule في وحدة التطبيق لديكم لبدء استخدام طلبات HTTP:

import { HttpClientModule } from '@angular/common/http';

إجراء طلب GET

استخدموا عميل HTTP لجلب البيانات من نقطة نهاية API:

this.http.get('https://api.example.com/data').subscribe(data => console.log(data));

التعامل مع بيانات الاستجابة

يعيد عميل HTTP كائنات Observables. اشتركوا فيها للتعامل مع البيانات بشكل غير متزامن:

this.http.get('api/data').subscribe(response => this.data = response);

طلب POST لإرسال البيانات

أرسلوا البيانات إلى الخادم باستخدام طلب POST:

this.http.post('api/items', newItem).subscribe(result => console.log(result));

معالجة الأخطاء

تعاملوا مع الأخطاء الناتجة عن طلبات HTTP باستخدام العامل catchError:

this.http.get('api/data').pipe(catchError(error => of('Error occurred'))).subscribe();

استخدام Headers

أضيفوا Headers إلى طلبات HTTP لإرسال معلومات إضافية:

const headers = new HttpHeaders().set('Authorization', 'my-auth-token');

الملخص

لقد تعلمتم كيفية استخدام عميل HTTP في Angular لجلب البيانات وإرسالها بفعالية عبر واجهات API. واصلوا التقدم!