عميل HTTP بلغة TypeScript: إجراء الطلبات بشكل صحيح: من الألف إلى الياء

عميل HTTP بلغة TypeScript: إجراء الطلبات بشكل صحيح

TypeScript هي امتداد لجافا سكريبت مع كتابة أنواع صارمة، مما يضيف الموثوقية وقابلية القراءة للكود في تطوير الويب. عند العمل مع واجهات برمجة التطبيقات الخارجية أو الواجهة الخلفية، تصبح مهارة إجراء طلبات HTTP بشكل صحيح أمرًا أساسيًا. في هذه المقالة، سنشرح كيفية إنشاء عميل HTTP كامل بلغة TypeScript، بدءًا من المبادئ الأساسية وصولاً إلى الأنماط المتقدمة لمعالجة الأخطاء وكتابة الأنواع.

لماذا TypeScript مثالي لعملاء HTTP؟

تقدم JavaScript عدة طرق لإجراء طلبات HTTP: fetch المدمج، ومكتبات axios و node-fetch. ومع ذلك، تسمح لك TypeScript بالارتقاء بالعمل معها إلى مستوى جديد بفضل كتابة الأنواع الثابتة. يمكنك وصف هيكل الطلب والاستجابة مسبقًا، مما يلغي العديد من الأخطاء في مرحلة التجميع. تخيل أنك تعمل مع API يعيد قائمة بالمستخدمين. بدون أنواع، قد تخاطر بالوصول إلى حقل غير موجود، وسيظهر الخطأ فقط في وقت التشغيل. TypeScript تحل هذه المشكلة.

الجزء الرئيسي: إنشاء عميل HTTP من الصفر

1. طلب GET أساسي مع fetch وكتابة الأنواع

لنبدأ بأبسط شيء - طلب GET. في TypeScript، يمكننا تعريف واجهة للاستجابة وتمريرها إلى دالة fetch العامة. إليك مثال:

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);    if (!response.ok) {    throw new Error(`خطأ HTTP! الحالة: ${response.status}`);  }    const data: User = await response.json();  return data;}

// الاستخدامgetUser(1)  .then(user => console.log(user.name))  .catch(error => console.error('خطأ:', error.message));

هنا نحدد بوضوح أن الدالة تعيد Promise<User>. إذا تغير API، سيحذرك مترجم TypeScript من عدم تطابق الأنواع. لاحظ التحقق من response.ok - هذه خطوة إلزامية لمعالجة أخطاء HTTP (404، 500، إلخ).

2. طلب POST مع الجسم والرؤوس

يتطلب إرسال البيانات إلى الخادم إعداد الرؤوس وتسلسل جسم الطلب. لننشئ دالة لإنشاء مستخدم جديد:

interface CreateUserRequest {  name: string;  email: string;}

interface CreateUserResponse {  id: number;  name: string;  email: string;}

async function createUser(userData: CreateUserRequest): Promise<CreateUserResponse> {  const response = await fetch('https://jsonplaceholder.typicode.com/users', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify(userData),  });

  if (!response.ok) {    const errorBody = await response.text();    throw new Error(`خطأ في الإنشاء: ${response.status} - ${errorBody}`);  }

  return await response.json();}

// مثال على الاستدعاءconst newUser: CreateUserRequest = { name: 'إيفان', email: 'ivan@example.com' };createUser(newUser).then(result => console.log('تم إنشاء ID:', result.id));

كتابة الأنواع لـ CreateUserRequest و CreateUserResponse تجعل الكود موثقًا ذاتيًا. يرى المطورون الآخرون على الفور الحقول المطلوبة للإرسال وما يمكن توقعه في الاستجابة.

3. عميل HTTP عالمي مع معالجة الأخطاء

في المشاريع الحقيقية، نادرًا ما نكتفي بدالة واحدة. من الأفضل إنشاء فئة عامة أو مجموعة دوال تقوم بمركزة منطق الطلبات. إليك مثال على عميل متقدم:

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface RequestConfig {  method: HttpMethod;  endpoint: string;  body?: unknown;  params?: Record<string, string>;}

class HttpClient {  private baseUrl: string;\