27. التعامل مع طلبات POST

تُستخدم طلبات POST لإرسال البيانات إلى الخادم لإنشاء مورد جديد.

استخدام HttpClient.post()

يأخذ أسلوب post ثلاثة وسائط:

1. نقطة نهاية العنوان (URL endpoint).
2. حمولة الجسم (body payload) (البيانات المراد إرسالها).
3. (اختياري) خيارات التهيئة (الرؤوس، المعلمات).

typescript // data.service.ts

interface NewPostData { title: string; body: string; userId: number; }

// يُرجع الكائن الذي تم إنشاؤه (غالباً مع معرّف ID جديد تم تعيينه بواسطة الخادم) createPost(postData: NewPostData) { return this.http.post('https://jsonplaceholder.typicode.com/posts', postData); }

الاشتراك والتعامل مع الاستجابة

في المكون، نستدعي أسلوب الخدمة ونشترك. غالباً ما تؤكد الاستجابة أن المورد قد تم إنشاؤه وتتضمن أحياناً الكائن الكامل بخصائص معينة من قبل الخادم (مثل id).

typescript // post-creator.component.ts

newPost: NewPostData = { title: 'Test Title', body: 'Test Body', userId: 1 };

onSubmit() { this.dataService.createPost(this.newPost).subscribe({ next: (response) => { console.log('Post created successfully:', response); alert(Post ID ${response.id} created!); // مسح النموذج أو الانتقال بعيداً }, error: (err) => { console.error('Error creating post:', err); } }); }

ملاحظة مهمة: الرؤوس ونوع المحتوى

يقوم HttpClient في Angular تلقائياً بتعيين رأس Content-Type إلى application/json لطلبات POST عندما تكون الحمولة عبارة عن كائن JavaScript، مما يضمن أن الخادم يعرف كيفية تحليل البيانات.