Axios لجافا سكريبت (Node.js): دليل شامل مع أمثلة

ما هو Axios ولماذا هو مطلوب؟

\n\n

Axios هي مكتبة جافا سكريبت قوية وشائعة لإجراء طلبات HTTP. تعمل في المتصفح وبيئة Node.js على حد سواء، وتوفر واجهة برمجة تطبيقات (API) موحدة وسهلة الاستخدام تعتمد على Promise. إذا كنت بحاجة إلى إرسال طلب GET إلى API، أو تحميل البيانات إلى الخادم عبر POST، أو معالجة الرد بتنسيق JSON، فإن Axios سيتعامل مع ذلك بأناقة وكفاءة.

\n\n

لماذا استخدام Axios بدلاً من fetch المدمج أو XMLHttpRequest؟

\n

\n
• المعالجة التلقائية لـ JSON: يقوم Axios تلقائياً بتحويل الردود إلى JSON، مما يلغي الحاجة إلى استدعاء response.json().
\n
• المعترضات (Interceptors): يمكنك بسهولة إضافة منطق عام لجميع الطلبات (مثل رموز التفويض) أو الردود (مثل معالجة الأخطاء).
\n
• إلغاء الطلبات: دعم مدمج لإلغاء الطلبات عبر AbortController.
\n
• الحماية من CSRF: العمل التلقائي مع رموز XSRF لتعزيز الأمان.
\n
• تقدم التحميل: إمكانية تتبع تقدم إرسال واستقبال البيانات.
\n
• معالجة مريحة للأخطاء: رسائل خطأ أكثر إفادة وإمكانية التمييز بسهولة بين حالات الردود.
\n
• دعم المتصفحات القديمة: على عكس fetch، يعمل Axios في Internet Explorer 11 والمتصفحات القديمة الأخرى.
\n

\n\n

التثبيت

\n\n

يتم تثبيت Axios في مشروع Node.js أو مشروع الواجهة الأمامية (عبر npm/yarn/pnpm) بأمر واحد:

\n\n

# التثبيت عبر npm (موصى به)\nnpm install axios\n\n# التثبيت عبر yarn\nyarn add axios\n\n# التثبيت عبر pnpm\npnpm add axios\n

\n\n

للاستخدام في المتصفح، يمكنك أيضاً تضمين Axios عبر CDN:

\n\n

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>\n

\n\n

بداية سريعة

\n\n

بعد التثبيت، يمكنك البدء فوراً في إجراء الطلبات. إليك مثال بسيط لطلب GET إلى API عام:

\n\n

// استيراد المكتبة (لـ Node.js أو المشاريع المعيارية)\nimport axios from 'axios';\n\n// إجراء طلب GET إلى JSONPlaceholder API\naxios.get('https://jsonplaceholder.typicode.com/posts/1')\n  .then(response => {\n    console.log('حالة الرد:', response.status);\n    console.log('البيانات:', response.data);\n  })\n  .catch(error => {\n    console.error('خطأ في الطلب:', error.message);\n  });\n

\n\n

سيرسل هذا الكود طلب GET، ويستقبل الرد، ويطبع حالته ونصه (الذي تم تحليله تلقائياً من JSON إلى كائن جافا سكريبت).

\n\n

الطرق والوظائف الأساسية

\n\n

يوفر Axios طرق تغليف مريحة لجميع طرق HTTP الأساسية. كل منها يُرجع Promise.

\n\n

1. axios.get(url, config?)

\n

ما يفعله: ينفذ طلب HTTP GET لجلب البيانات من الخادم.

\n

المعلمات:

\n

\n
• url (string) — عنوان URL للطلب.
\n
• config (object، اختياري) — كائن تكوين Axios (مثل headers، params لسلسلة الاستعلام، timeout).
\n

\n

مثال:

\n

// طلب مع معاملات الاستعلام\naxios.get('https://api.example.com/users', {\n  params: {\n    page: 2,\n    limit: 10\n  },\n  headers: {\n    'Authorization': 'Bearer my-token'\n  }\n})\n.then(response => {\n  console.log(response.data);\n});\n

\n\n

2. axios.post(url, data?, config?)

\n

ما يفعله: ينفذ طلب HTTP POST لإرسال البيانات إلى الخادم (عادةً لإنشاء مورد جديد).

\n<