ما هو

Axios هو عميل HTTP شائع يعتمد على الوعود للمتصفحات وNode.js، مصمم لتبسيط طلبات HTTP. تكمن قيمة العميل الأساسية في سهولة استخدامه وقابليته للتوسيع، مما يوفر نهجًا مبسطًا للتعامل مع اتصالات HTTP غير المتزامنة. على عكس واجهة برمجة التطبيقات fetch الأصلية، يوفر Axios ميزات مثل التحويل التلقائي لـ JSON، واعتراض الطلبات والاستجابات، ودعم مدمج للمتصفحات القديمة. يستفيد من واجهة برمجة تطبيقات Promise الخاصة بـ JavaScript للعمليات غير المتزامنة، مما يجعل التعليمات البرمجية أنظف وأكثر قابلية للقراءة. يستفيد المطورون من واجهة برمجة التطبيقات البديهية، والتعامل القوي مع الأخطاء، ودعم المجتمع الواسع، مما يجعله الخيار المفضل لبناء تطبيقات الويب وواجهات برمجة التطبيقات.

الميزات الأساسية

واجهة برمجة تطبيقات تعتمد على الوعود

تستخدم Axios واجهة برمجة تطبيقات `Promise` الخاصة بـ JavaScript، مما يتيح تعليمات برمجية غير متزامنة أنظف وأكثر قابلية للقراءة مقارنة بالأساليب القائمة على رد الاتصال. يتيح ذلك تسلسل الطلبات ومعالجة الأخطاء بسهولة أكبر باستخدام `.then()` و `.catch() `، مما يحسن صيانة التعليمات البرمجية ويقلل من مشكلة 'جحيم رد الاتصال'. يسمح هذا أيضًا بالتكامل الأسهل مع بناء جملة async/await.

معترضو الطلبات والاستجابات

تتيح لك المعترِضات اعتراض الطلبات وتعديلها قبل إرسالها والاستجابات قبل التعامل معها. هذا مفيد لمهام مثل إضافة رؤوس المصادقة أو تسجيل الطلبات أو تحويل البيانات. على سبيل المثال، يمكنك إضافة رأس تفويض عام باستخدام `axios.interceptors.request.use(config => { config.headers.Authorization = 'Bearer YOUR_TOKEN'; return config; });`

التحويل التلقائي لـ JSON

يقوم Axios تلقائيًا بتحويل بيانات JSON في كل من الطلبات والاستجابات. عند إرسال البيانات، يقوم تلقائيًا بتسلسل كائنات JavaScript إلى JSON. عند استلام البيانات، فإنه يقوم تلقائيًا بتحليل استجابة JSON إلى كائن JavaScript. هذا يبسط التعامل مع البيانات، مما يلغي الحاجة إلى التحليل اليدوي والتسلسل في معظم الحالات.

دعم المتصفح وNode.js

يعمل Axios بسلاسة في كل من بيئات المتصفح وNode.js، مما يوفر واجهة برمجة تطبيقات متسقة عبر الأنظمة الأساسية المختلفة. يتيح هذا للمطورين إعادة استخدام نفس التعليمات البرمجية لكل من طلبات HTTP منتهية الأمام والخلفية، مما يقلل من وقت وجهد التطوير. إنه يلخص الاختلافات بين `XMLHttpRequest` ووحدة `http`.

إلغاء الطلب

يتيح لك Axios إلغاء الطلبات باستخدام `CancelToken`. هذا مفيد للسيناريوهات التي لم تعد فيها هناك حاجة إلى طلب، مثل عندما ينتقل المستخدم بعيدًا عن الصفحة أو يحدث مهلة. يمكنك إنشاء `CancelToken` وتمريره إلى تكوين الطلب. يمكنك بعد ذلك إلغاء الطلب باستخدام طريقة `cancel()` على الرمز المميز.

حماية XSRF المضمنة

يوفر Axios دعمًا مدمجًا للحماية من طلبات التزييف عبر المواقع (XSRF). يقوم تلقائيًا بتعيين رأس `X-XSRF-TOKEN` عند تقديم طلبات إلى نفس الأصل، مما يساعد على التخفيف من هجمات XSRF. تعمل هذه الميزة على تبسيط تنفيذ تطبيقات الويب الآمنة من خلال توفير مستوى افتراضي من الحماية ضد نقاط الضعف الأمنية الشائعة.

كيفية الاستخدام

تضمين Axios في مشروعك: التثبيت عبر npm أو yarn: npm install axios أو yarn add axios.,2. استيراد Axios: في ملف JavaScript الخاص بك، استورد Axios: import axios from 'axios';.,3. تقديم طلب GET: استخدم axios.get('your_api_endpoint') لاسترجاع البيانات. تعامل مع الاستجابة باستخدام .then() و .catch().,4. تقديم طلب POST: استخدم axios.post('your_api_endpoint', { data: yourData }) لإرسال البيانات. الوسيط الثاني هو حمولة البيانات.,5. التعامل مع الاستجابات: الوصول إلى البيانات عبر response.data، رمز الحالة عبر response.status، والرؤوس عبر response.headers.,6. تنفيذ معالجة الأخطاء: استخدم .catch() للتعامل مع الأخطاء. الوصول إلى تفاصيل الخطأ عبر error.response (لأخطاء الخادم) أو error.message (لأخطاء الشبكة).

حالات الاستخدام

جلب البيانات في تطبيقات الويب

يستخدم مطورو الويب Axios لاسترجاع البيانات من واجهات برمجة التطبيقات في تطبيقات الويب الخاصة بهم. على سبيل المثال، سيستخدم المطور الذي يقوم ببناء تطبيق للطقس Axios لجلب بيانات الطقس من واجهة برمجة تطبيقات الطقس، وتحليل استجابة JSON، وعرض المعلومات على واجهة المستخدم. هذه وظيفة أساسية للعديد من تطبيقات الويب الحديثة.

إجراء مكالمات API في Node.js

يستخدم مطورو الواجهة الخلفية Axios في تطبيقات Node.js للتفاعل مع واجهات برمجة التطبيقات الخارجية. قد يستخدم المطور الذي يقوم بإنشاء تطبيق من جانب الخادم Axios لإرسال البيانات إلى واجهة برمجة تطبيقات بوابة الدفع أو استرجاع البيانات من خدمة خارجية. يتيح هذا لمنطق جانب الخادم التواصل مع الخدمات الأخرى.

التعامل مع عمليات إرسال النماذج

يستخدم مطورو الواجهة الأمامية Axios لإرسال بيانات النموذج إلى واجهات برمجة التطبيقات. على سبيل المثال، سيستخدم المطور الذي يقوم ببناء نموذج اتصال على موقع ويب Axios لإرسال بيانات النموذج إلى نقطة نهاية من جانب الخادم. يتعامل Axios مع تسلسل بيانات النموذج وإرسال طلب HTTP.

تنفيذ المصادقة

يستخدم المطورون Axios للتعامل مع تدفقات المصادقة، مثل تسجيل دخول المستخدمين أو تحديث رموز الوصول. قد يستخدم المطور Axios لإرسال بيانات اعتماد تسجيل الدخول إلى واجهة برمجة تطبيقات المصادقة وتخزين الرمز المميز المسترجع للطلبات اللاحقة. يمكن استخدام المعترِضات لإضافة الرمز المميز تلقائيًا إلى كل طلب.

من يستفيد

مطورون الواجهة الأمامية

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

مطورون الواجهة الخلفية

يستخدم مطورو الواجهة الخلفية Axios في بيئات Node.js لتقديم طلبات HTTP إلى واجهات برمجة تطبيقات أو خدمات أخرى. يتيح لهم ذلك بناء تطبيقات من جانب الخادم تتفاعل مع الموارد الخارجية وتتعامل مع تبادل البيانات وتتكامل مع مختلف الخدمات الخارجية.

مطورون Full-Stack

يستفيد مطورو Full-Stack من Axios لكل من تطوير الواجهة الأمامية والخلفية. يمكنهم استخدام نفس المكتبة وواجهة برمجة التطبيقات لتقديم طلبات HTTP في كلا البيئتين، مما يؤدي إلى تبسيط سير عملهم وتقليل منحنى التعلم للتعامل مع تفاعلات واجهة برمجة التطبيقات عبر مجموعة التطبيقات بأكملها.

مكاملو واجهة برمجة التطبيقات

يجد المطورون الذين يحتاجون إلى التكامل مع واجهات برمجة تطبيقات مختلفة أن Axios لا تقدر بثمن. ميزاته مثل معترِضات الطلبات/الاستجابات، والتحويل التلقائي لـ JSON، وواجهة برمجة التطبيقات القائمة على الوعود تجعل من السهل التعامل مع تنسيقات واجهة برمجة التطبيقات المختلفة، وطرق المصادقة، ومعالجة الأخطاء، مما يبسط عملية التكامل.

المزيد من الأدوات المشابهة مثل