Http Client Module
Http Client Module
جدول المصطلحات :
مقدمة:
مع تطور إصدارات Angular، تم تقديم وحدة HttpClientModule التي توفر واجهة مبسطة وقوية للتعامل مع طلبات HTTP. هذه الوحدة تعتمد على نفس مبادئ HTTP التقليدية، لكنها تضيف مزايا مثل دعم الـ Observables ومعالجة الأخطاء تلقائيًا، مما يسهل على المطورين التواصل مع APIs الخارجية.
خطوات الاستخدام:
الخطوة 1: استيراد HttpClientModule في AppModule
typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule // ← إضافة الوحدة هنا
],
bootstrap: [AppComponent]
})
export class AppModule { }
الخطوة 2: استخدام HttpClient في الـ Component
typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
users: any[] = [];
constructor(private http: HttpClient) { }
ngOnInit() {
this.getUsers();
}
// GET Request
getUsers() {
this.http.get<any[]>('https://api.example.com/users')
.subscribe({
next: (response) => {
this.users = response;
console.log('تم جلب البيانات:', response);
},
error: (err) => {
console.error('حدث خطأ:', err);
}
});
}
}
الخطوة 3: إرسال بيانات إلى السيرفر (POST)
typescript
addUser(newUser: any) {
this.http.post('https://api.example.com/users', newUser)
.subscribe({
next: (response) => {
console.log('تمت الإضافة بنجاح:', response);
this.getUsers(); // إعادة تحميل القائمة
},
error: (err) => {
console.error('فشلت الإضافة:', err);
}
});
}
الخطوة 4: تحديث بيانات موجودة (PUT)
typescript
updateUser(id: number, updatedData: any) {
this.http.put(`https://api.example.com/users/${id}`, updatedData)
.subscribe({
next: (response) => {
console.log('تم التحديث:', response);
},
error: (err) => {
console.error('فشل التحديث:', err);
}
});
}
الخطوة 5: حذف بيانات (DELETE)
typescript
deleteUser(id: number) {
this.http.delete(`https://api.example.com/users/${id}`)
.subscribe({
next: () => {
console.log('تم الحذف بنجاح');
this.users = this.users.filter(user => user.id !== id);
},
error: (err) => {
console.error('فشل الحذف:', err);
}
});
}
أفضل الممارسات والنصائح:
استخدام الـ Interfaces لنوعية البيانات:
typescript
export interface User {
id: number;
name: string;
email: string;}
تجميع الطلبات في Service منفصل:
typescript
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get<User[]>('https://api.example.com/users');
}}
معالجة الأخطاء بشكل مركزي باستخدام Interceptors.
إلغاء الـ Subscription عند تدمير الـ Component (استخدام async pipe أو unsubscribe).
ملخص:
توفر وحدة HttpClientModule في Angular حلاً قويًا وسهل الاستخدام للتواصل مع APIs الخارجية. من خلال دعمها الكامل لجميع طرق HTTP الرئيسية ومزايا مثل الـ Observables ومعالجة الأخطاء، أصبحت الخيار الأمثل لتطوير تطبيقات ويب تفاعلية ومرتبطة بخوادم خارجية.
ليست هناك تعليقات: