عميل HTTP Axios لـ TypeScript

ما هو Axios؟

Axios هو عميل HTTP شائع يعتمد على Promise للمتصفح و Node.js، مكتوب بلغة TypeScript. يوفر واجهة مريحة وقوية لتنفيذ طلبات HTTP، ويدعم المعترضات (interceptors)، والتحويل التلقائي لبيانات JSON، والحماية من CSRF. المكتبة مثالية لتطبيقات الويب الحديثة التي تتطلب عملاً مرناً مع REST API.

لماذا نحتاج Axios؟

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

التثبيت

npm install axios

بالنسبة لمشاريع TypeScript، الأنواع مضمنة بالفعل في الحزمة، ولا يلزم تثبيت @types/axios بشكل إضافي.

الوظائف الأساسية

دعم جميع طرق HTTP: GET، POST، PUT، DELETE، PATCH وغيرها.
التحويل التلقائي للبيانات: يتم تحليل الاستجابات تلقائياً إلى JSON، ويتم تسلسل كائنات الطلبات.
المعترضات (interceptors): يمكن إضافة منطق قبل إرسال الطلب أو بعد تلقي الاستجابة (على سبيل المثال، لإضافة رمز التفويض).
إلغاء الطلبات: عبر CancelToken أو AbortController.
المهلات والتقدم: ضبط وقت الانتظار وتتبع تقدم التحميل/الرفع.
الكتابة الصارمة: دعم الأدوية الجنسية (generics) لكتابة جسم الاستجابة.

مثال كود بلغة TypeScript

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  try {    const response: AxiosResponse<User> = await axios.get<User>(`https://api.example.com/users/${id}`);    return response.data;  } catch (error) {    if (axios.isAxiosError(error)) {      console.error('Axios error:', error.message);    } else {      console.error('Unexpected error:', error);    }    throw error;  }}

// الاستخدامfetchUser(1).then(user => console.log(user.name));

متى تستخدم Axios

يعتبر Axios مثالياً لأي مشاريع TypeScript التي تتطلب التفاعل مع خوادم HTTP: من تطبيقات الصفحة الواحدة البسيطة (SPA) إلى تطبيقات الخادم المعقدة على Node.js. يكون مفيداً بشكل خاص عندما تحتاج إلى معالجة متقدمة للأخطاء، أو تسلسل تلقائي للبيانات، أو العمل مع عدة APIs. إذا كنت تستخدم React أو Vue أو Angular، فإن Axios يتكامل معها بسهولة بفضل دعم المعترضات وإلغاء الطلبات.

المكتبة مدعومة بنشاط، ولديها مجتمع ضخم، وتستخدم في آلاف المشاريع. Axios هو حل ناضج ومستقر لا يتطلب تبعيات إضافية.