إتقان طلبات API باستخدام Axios Retry: دليل شامل

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

لماذا Axios؟

أولاً وقبل كل شيء، لماذا يجب عليك استخدام Axios لطلبات API الخاصة بك؟ Axios هو عميل HTTP يعتمد على الوعود لجافا سكريبت. إنه شائع لسهولة استخدامه ومرونته، مما يتيح لك إجراء طلبات إلى كل من واجهات API الخلفية وواجهات API الطرف الثالث. يدعم جميع طرق HTTP ويعمل بسلاسة مع تطبيقات Node.js والمتصفح. بالإضافة إلى ذلك، يأتي مع مجموعة من الميزات المفيدة مثل المقاطعات، والتحويل التلقائي لبيانات JSON، والأهم بالنسبة لنا، طلبات إعادة المحاولة.

المشكلة مع الشبكات غير الموثوقة

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

إعداد Axios

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

npm install axios

أو

yarn add axios

بمجرد تثبيته، يمكنك استيراد Axios وبدء إجراء طلبات API. إليك مثال بسيط:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

تقديم AxiosRetry

فكيف نجعل Axios يعيد محاولة الطلب عندما يفشل؟ الجواب يكمن في مقاطعات Axios. تتيح لك المقاطعات تشغيل الكود الخاص بك أو تعديل الطلب/الاستجابة قبل إرسال الطلب أو بعد استلام الاستجابة. لإعادة محاولة الطلبات، سنستخدم مقاطعات الطلب.

سنحتاج إلى تثبيت حزمة إضافية، axios-retry، التي تجعل تنفيذ إعادة المحاولات بسيطًا. قم بتثبيتها باستخدام npm أو yarn:

npm install axios-retry

أو

yarn add axios-retry

بعد ذلك، دعنا نقوم بإعداد Axios Retry في مشروعنا:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, { retries: 3 });

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

في هذا المثال، قمنا بتكوين Axios لإعادة محاولة الطلبات الفاشلة حتى ثلاث مرات. إنه بسيط!

تخصيص Axios Retry

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

منطق إعادة المحاولة المخصص

دعنا نخصص منطق إعادة المحاولة لإعادة المحاولة فقط في حالة حدوث أخطاء شبكية أو رموز حالة معينة:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    return error.response.status === 500 || axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

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

تأجيل بين المحاولات

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

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: (retryCount) => {
    return retryCount * 1000; // تأخير ثانية واحدة بين المحاولات
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

يقدم هذا الإعداد تأخيرًا قدره ثانية واحدة بين المحاولات.

التراجع الأسّي

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

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

معالجة طرق HTTP معينة

أحيانًا، قد ترغب في إعادة المحاولة فقط لطرق HTTP معينة. افتراضيًا، تقوم axios-retry بإعادة محاولة طلبات GET، ولكن يمكنك تخصيص ذلك:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  shouldResetTimeout: true,
  retryCondition: (error) => {
    return axiosRetry.isRetryableError(error) && error.config.method === 'get';
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

حالة استخدام حقيقية: جلب البيانات من API

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

إليك كيفية تنفيذ إعادة المحاولة Axios في تطبيق الطقس الخاص بك:

import axios from 'axios';
import axiosRetry from 'axios-retry';

// إعداد إعادة المحاولة Axios
axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: (error) => {
    return error.response.status === 503 || axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

// دالة لجلب بيانات الطقس
const fetchWeatherData = async (city) => {
  try {
    const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
    return response.data;
  } catch (error) {
    console.error('خطأ في جلب بيانات الطقس:', error);
    throw error;
  }
};

// الاستخدام
fetchWeatherData('سان فرانسيسكو')
  .then(data => {
    console.log('بيانات الطقس:', data);
  })
  .catch(error => {
    console.error('فشل في جلب بيانات الطقس بعد إعادة المحاولة:', error);
  });

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

أبيدوغ: أداة مجانية لتوليد كود Axios الخاص بك

أبيدوغ هو منصة تطوير API تعاونية شاملة توفر مجموعة أدوات شاملة لتصميم وتصحيح واختبار ونشر وتقليد الواجهات. يتيح لك أبيدوغ إنشاء كود Axios تلقائيًا لإجراء طلبات HTTP.

إليك العملية لاستخدام أبيدوغ لتوليد كود Axios:

الخطوة 1: افتح أبيدوغ واختر طلبًا جديدًا

الخطوة 2: أدخل عنوان URL لنقطة نهاية API التي تريد إرسال الطلب إليها، ادخل أي رؤوس أو معلمات استعلام ترغب في تضمينها مع الطلب، ثم انقر على "تصميم" للتحويل إلى واجهة تصميم أبيدوغ.

الخطوة 3: اختر "توليد كود العميل" لتوليد كودك.

الخطوة 4: انسخ كود Axios المولد والصقه في مشروعك.

استخدام أبيدوغ لإرسال طلبات HTTP

أبيدوغ يقدم العديد من الميزات المتقدمة التي تعزز بشكل أكبر قدرته على اختبار طلبات HTTP. تتيح لك هذه الميزات تخصيص طلباتك والتعامل مع سيناريوهات أكثر تعقيدًا بسهولة.

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

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

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

أفضل الممارسات

مراقبة محاولات إعادة المحاولة

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

التعامل مع سيناريوهات مختلفة

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

ابقِ المستخدم على اطلاع

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

تحديد محاولات إعادة المحاولة

تجنب إعادة المحاولات غير المحدودة عن طريق تعيين حد معقول. يمنع ذلك تطبيقك من الانزلاق في حلقة لا نهائية من الطلبات الفاشلة.

خاتمة

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

هل أنت مستعد لأخذ تطوير API الخاص بك إلى المستوى التالي؟ لا تنسَ التحقق من أبيدوغ للحصول على مجموعة أدوات شاملة تبسط تطوير واختبار API. مع أبيدوغ، ستكون مجهزًا للتعامل مع أي تحدي API يأتي في طريقك.