26. إجراء طلبات GET

تُستخدم طلبات GET لاسترداد البيانات من الخادم. يتعامل أسلوب HttpClient.get() مع هذا.

تحديد نوع الاستجابة

قم دائماً بتعريف واجهة للاستجابة المتوقعة من API. وهذا يستغل قوة TypeScript ويوفر سلامة النوع للبيانات التي نجلبها.

typescript interface Post { userId: number; id: number; title: string; body: string; }

// data.service.ts import { HttpClient } from '@angular/common/http';

// ... داخل فئة DataService

getPosts() { // حدد النوع المتوقع <Post[]> في المعامل العام return this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts'); }

الاشتراك في المكون

بما أن getPosts() يُرجع Observable، يجب علينا الاشتراك لتنفيذ الطلب والتعامل مع البيانات عند وصولها.

typescript // post-list.component.ts import { Post } from './data.service'; import { DataService } from './data.service';

export class PostListComponent implements OnInit { posts: Post[] = [];

constructor(private dataService: DataService) { }

ngOnInit(): void { this.dataService.getPosts().subscribe({ next: (data) => { // التعامل مع استرداد البيانات الناجح this.posts = data; }, error: (err) => { // التعامل مع الأخطاء console.error('Fetch error:', err); }, complete: () => { // التعامل مع الإكمال (اختياري) console.log('Post fetching completed.'); } }); } }

ملاحظة حول إلغاء الاشتراك (Unsubscribing): بالنسبة لـ Observables التي تكتمل (مثل تلك التي يتم إرجاعها بواسطة HttpClient)، فإن إلغاء الاشتراك اليدوي ليس ضرورياً بشكل صارم. ومع ذلك، بالنسبة لـ Observables طويلة الأمد (مثل المؤقتات أو أحداث الموجه)، فإن إلغاء الاشتراك في ngOnDestroy إلزامي لمنع تسرب الذاكرة.