كيفية إجراء مكالمات REST API باستخدام Axios

تعتبر واجهات برمجة التطبيقات REST وسيلة للتواصل بين خدمات الويب. تستخدم طلبات HTTP للحصول على (GET) و إرسال (POST) وتحديث (PUT) وحذف (DELETE) البيانات. تعتبر واجهات برمجة التطبيقات REST مهمة لأنها تتيح للمطورين الوصول إلى البيانات من مجموعة متنوعة من المصادر، بما في ذلك منصات التواصل الاجتماعي ومواقع التجارة الإلكترونية والمزيد.

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

إذًا، هل أنت مستعد لتعلم كيفية إجراء استدعاءات واجهة برمجة التطبيقات REST الرائعة باستخدام Axios و Apidog؟ دعنا نبدأ!

لماذا تعتبر واجهات برمجة التطبيقات REST مستقبل خدمات الويب

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

ما هو Axios؟

Axios هي مكتبة JavaScript تتيح لك إجراء طلبات HTTP من كل من المتصفح و Node.js. إنها مبنية على الوعد، مما يعني أنه يمكنك استخدام async/await أو الوعود للتعامل مع نتائج طلباتك.

يمتلك Axios العديد من المزايا مقارنة مع واجهة Fetch الأصلية أو دالة $.ajax() الخاصة بـ jQuery. بعض فوائد استخدام Axios هي:

• يدعم المتصفحات القديمة، على عكس Fetch، الذي يتطلب polyfill
• يقوم تلقائيًا بتحويل بيانات JSON، على عكس Fetch، الذي يتطلب منك استدعاء .json() على الاستجابة
• يتيح لك ضبط مهلة لطلباتك، على عكس Fetch، الذي لا يحتوي على خيار المهلة
• يحميك من هجمات التزوير عبر المواقع (XSRF)، على عكس jQuery، الذي لا يحتوي على حماية مدمجة ضد XSRF
• يتيح لك مراقبة تقدم طلباتك، على عكس jQuery، الذي لا يحتوي على خيار التقدم
• يتيح لك إلغاء طلباتك، على عكس jQuery، الذي لا يحتوي على خيار الإلغاء
• يمتلك بنية أكثر إيجازًا ووضوحًا، على عكس jQuery، الذي قد يكون مطولًا ومعقدًا

كما ترى، يتمتع Axios بالعديد من الميزات التي تجعله خيارًا رائعًا لإجراء طلبات HTTP في JavaScript. لكن كيف تستخدم Axios؟ دعنا نكتشف!

كيفية تثبيت Axios

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

• npm: npm install axios
• Yarn: yarn add axios
• pnpm: pnpm add axios
• Bower: bower install axios
• CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

بمجرد أن تقوم بتثبيت Axios، يمكنك استيراده في ملف JavaScript الخاص بك وبدء استخدامه. على سبيل المثال، إذا كنت تستخدم Node.js، يمكنك استيراد Axios هكذا:

const axios = require('axios');

إذا كنت تستخدم إطار عمل حزم مثل Webpack أو Rollup، يمكنك استيراد Axios هكذا:

import axios from 'axios';

إذا كنت تستخدم CDN، يمكنك الوصول إلى Axios من المتغير العالمي axios.

تعتبر واجهات برمجة التطبيقات REST وسيلة قوية للتفاعل مع خدمات الويب والبيانات. تتيح للمطورين الوصول إلى البيانات والتلاعب بها من مجموعة متنوعة من المصادر، بما في ذلك منصات التواصل الاجتماعي ومواقع التجارة الإلكترونية والمزيد. Axios هي مكتبة JavaScript شائعة تسهل العمل مع واجهات برمجة التطبيقات REST. في هذه التدوينة، سنستعرض كيفية استخدام Axios لإجراء استدعاءات واجهة برمجة التطبيقات REST.

إجراء أول استدعاء لواجهة برمجة التطبيقات REST باستخدام Axios

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

للشروع في استخدام Axios، ستحتاج إلى تثبيته باستخدام npm أو yarn. بمجرد أن تقوم بتثبيت Axios، يمكنك إجراء طلب GET بسيط هكذا:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

هذا الكود يجري طلب GET إلى https://api.example.com/data ويقوم بتسجيل بيانات الاستجابة في وحدة التحكم. إذا حدث خطأ، يقوم بتسجيل الخطأ في وحدة التحكم بدلاً من ذلك.

إرسال بيانات إلى الخادم باستخدام Axios

في هذا القسم، سنوضح لك كيفية إرسال بيانات إلى الخادم باستخدام Axios. سنتناول كيفية إجراء طلب POST، كيفية إرسال البيانات في جسم الطلب، وكيفية ضبط الرؤوس.

لإجراء طلب POST باستخدام Axios، يمكنك استخدام axios.post() طريقة. إليك مثال:

axios.post('https://api.example.com/data', {
  name: 'جون دو',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

هذا الكود يرسل طلب POST إلى https://api.example.com/data مع البيانات { name: 'جون دو', email: 'john.doe@example.com' } في جسم الطلب. إذا حدث خطأ، يقوم بتسجيل الخطأ في وحدة التحكم بدلاً من ذلك.

تعديل الطلبات والاستجابات باستخدام عوامل التصفية Axios

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

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

إليك مثال على كيفية إضافة عامل تصفية إلى مثيل Axios الخاص بك:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
  // أضف رؤوس المصادقة هنا
  return config;
});

axiosInstance.interceptors.response.use(response => {
  // تعديل بيانات الاستجابة هنا
  return response;
}, error => {
  // التعامل مع الأخطاء هنا
  return Promise.reject(error);
});

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

التعامل مع الأخطاء في استدعاءات واجهة برمجة التطبيقات REST باستخدام Axios

يوفر Axios واجهة برمجة تطبيقات بسيطة وسهلة الاستخدام للتعامل مع الأخطاء. يمكنك استخدام catch() الطريقة للتعامل مع الأخطاء الشبكية، وأخطاء HTTP، والأخطاء المخصصة.

إليك مثال:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // تم إرسال الطلب واستجاب الخادم برمز حالة
      // يقع خارج نطاق 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // تم إرسال الطلب ولكن لم يتم تلقي استجابة
      console.log(error.request);
    } else {
      // حدث شيء أثناء إعداد الطلب أدى إلى ظهور خطأ
      console.log('خطأ', error.message);
    }
    console.log(error.config);
  });

هذا الكود يقوم بإجراء طلب GET إلى https://api.example.com/data ويسجل بيانات الاستجابة في وحدة التحكم. إذا حدث خطأ، يقوم بتسجيل الخطأ في وحدة التحكم بدلاً من ذلك. التعامل مع الأخطاء بواسطة catch() الطريقة تعالج الخطأ وتقوم بتسجيل الرسالة المناسبة بناءً على نوع الخطأ.

أفضل الممارسات لتحسين استدعاءات واجهة برمجة التطبيقات REST باستخدام Axios

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

1. استخدم عوامل التصفية بحكمة: على الرغم من أن عوامل تصفية Axios قوية، إلا أنه يجب استخدامها بشكل معتدل لتجنب تعقيد الكود. يمكن استخدام عوامل التصفية لإضافة رؤوس المصادقة، تعديل الطلبات أو الاستجابات، أو التعامل مع الأخطاء. ومع ذلك، فإن استخدام الكثير من عوامل التصفية يمكن أن يجعل كودك صعب القراءة والصيانة.
2. التعامل مع الأخطاء بشكل عالمي: قم بتنفيذ آلية معالجة أخطاء عالمية لطلبات Axios. يمكن أن يساعدك ذلك على التقاط الأخطاء مبكرًا وتوفير تجربة معالجة أخطاء متسقة للمستخدمين. يمكنك استخدام خاصية axios.interceptors.response لإضافة معالج أخطاء عالمي.
3. التكوينات المودولارية: إذا كان تطبيقك يتفاعل مع عدة واجهات برمجة تطبيقات ذات تكوينات مختلفة، قم بإنشاء مثيلات Axios منفصلة بإعداداتها الخاصة للحفاظ على تنظيم الكود الخاص بك. يمكن أن يساعدك هذا على تجنب النزاعات بين تكوينات واجهات برمجة التطبيقات المختلفة وجعل كودك أسهل قراءة وصيانة.
4. استخدم رموز الإلغاء: يمكن استخدام رموز الإلغاء لإلغاء طلب قبل أن يكتمل. يمكن أن يكون ذلك مفيدًا إذا انتقل المستخدم بعيدًا عن صفحة معينة أو إذا كانت الطلبات تستغرق وقتًا طويلاً للإكمال. يمكنك استخدام خاصية axios.CancelToken لإنشاء رمز إلغاء.
5. استخدم المهلات: يمكن استخدام المهلات لتحديد الوقت الأقصى المسموح به لطلب. يمكن أن يساعدك ذلك على تجنب فترات الانتظار الطويلة وتحسين تجربة المستخدم. يمكنك استخدام خاصية timeout لتعيين مهلة لطلباتك.
6. قم بتحسين بياناتك: عند إرسال بيانات في طلباتك، قم بتحسينها لتقليل كمية البيانات المرسلة. يمكن أن يساعدك ذلك على تقليل الحمل على خادمك وتحسين أداء تطبيقك. يمكنك استخدام أدوات مثل Apidog لإنشاء هياكل بيانات محسّنة لطلباتك.
7. استخدم عناوين URL صديقة لمحركات البحث: عند تصميم واجهة برمجة التطبيقات REST الخاصة بك، استخدم عناوين URL صديقة لمحركات البحث لتسهيل زحف محركات البحث وفهرسة محتواك. يمكن أن يساعدك ذلك على تحسين تصنيفات محركات البحث الخاصة بك وزيادة حركة المرور إلى موقعك.
8. استخدم التخزين المؤقت: يمكن استخدام التخزين المؤقت لتخزين البيانات التي يتم الوصول إليها بشكل متكرر في الذاكرة أو على القرص. يمكن أن يساعدك ذلك على تقليل الحمل على خادمك وتحسين أداء تطبيقك. يمكنك استخدام أدوات مثل Redis أو Memcached لتنفيذ التخزين المؤقت في تطبيقك.
9. استخدم الضغط: يمكن استخدام الضغط لتقليل حجم طلباتك واستجاباتك. يمكن أن يساعدك ذلك على تقليل الحمل على خادمك وتحسين أداء تطبيقك. يمكنك استخدام أدوات مثل Gzip أو Brotli لتنفيذ الضغط في تطبيقك.
10. استخدم موازنة الحمل: يمكن استخدام موازنة الحمل لتوزيع الحمل عبر خوادم متعددة. يمكن أن يساعدك ذلك على تحسين أداء وموثوقية تطبيقك. يمكنك استخدام أدوات مثل NGINX أو HAProxy لتنفيذ موازنة الحمل في تطبيقك.

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

استخدم Apidog لاختبار وتصحيح استدعاءات واجهة برمجة التطبيقات REST الخاصة بك

Apidog هي منصة تطوير واجهة برمجة التطبيقات التعاون الشاملة التي توفر مجموعة متنوعة من الأدوات لتصميم واجهة برمجة التطبيقات، والتوثيق، والمحاكاة، والاختبار الآلي، وأكثر. مع Apidog، يمكنك تبسيط سير العمل في تطوير واجهة برمجة التطبيقات REST الخاصة بك وضمان أنها موثوقة وفعالة. للبدء باستخدام Apidog، يمكنك التسجيل مجانًا وتنزيل التطبيق لنظامي Mac أو Linux.

لإجراء استدعاء واجهة برمجة التطبيقات باستخدام Apidog، قم بإنشاء طلب جديد وأدخل عنوان الطلب الكامل ومعلمات الطلب.

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: ابحث أو أدخل تفاصيل واجهة برمجة التطبيقات يدويًا لطلب POST الذي ترغب في إجراءه.

الخطوة 3: املأ المعلمات المطلوبة وأي بيانات ترغب في تضمينها في جسم الطلب.

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

الخاتمة

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

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