أكسيوبس ضد فاتش: أيهما الأفضل لطلبات HTTP؟

طلبات HTTP أساسية للتواصل مع الخوادم وواجهات برمجة التطبيقات في تطبيقات الويب. هناك العديد من الطرق لإجراء طلبات HTTP في JavaScript، ولكن طريقتين من الأكثر شعبية هما Axios وfetch(). في هذه المقالة، سنقارن بين Axios وFetch() ونرى أيهما الأفضل في سيناريوهات مختلفة.

ما هو Axios؟

Axios مكتبة من طرف ثالث تقدم عميل HTTP قائم على الوعود لإجراء طلبات HTTP. تُستخدم Axios على نطاق واسع في مجتمع JavaScript وتشتهر بسهولة استخدامها ومرونتها.

الصيغة الأساسية لـ Axios

الصيغة الأساسية لمكتبة Axios كما يلي:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('خطأ:', error));

الميزات الرئيسية:

1. يمكن أن تقبل كائن يحتوي على كل من عنوان URL والتكوين كمعامل، أو عنوان URL كائن تكوين منفصل.
2. تستخدم خاصية data لإرسال البيانات إلى الخادم، وتتعامل تلقائيًا مع تحويل JSON.
3. تعيد بيانات الخادم مباشرة في خاصية data لكائن الاستجابة.
4. تعالج تلقائيًا رموز حالة خطأ HTTP، وترسلها إلى كتلة catch.
5. توفر آلية معالجة الأخطاء أكثر سلاسة.

مثال:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('استجاب الخادم برمز:', error.response.status);
    } else if (error.request) {
      console.error('لم يتم استلام استجابة');
    } else {
      console.error('خطأ:', error.message);
    }
  });

لماذا يجب عليك استخدام Axios؟

تحتوي على العديد من الميزات التي تسهل استخدامها، مثل:

• تحويل بيانات JSON تلقائيًا: تقوم Axios تلقائيًا بتحويل البيانات من وإلى JSON، لذلك لا تحتاج إلى التحليل أو التحويل يدويًا.
• تحديد وقت الاستجابة: تتيح لك Axios تحديد وقت للاستجابة لطلباتك، sehingga يمكنك معالجة الأخطاء إذا استغرق الخادم وقتًا طويلاً للرد.
• اعتراضات HTTP: تسمح لك Axios باعتراض الطلبات والاستجابات قبل التعامل معها بواسطة then أو catch، sehingga يمكنك تعديلها أو إضافة منطق إضافي.
• تقدم التنزيل: يمكن لـ Axios تتبع تقدم التنزيلات والتحميلات، sehingga يمكنك عرض تغذية راجعة للمستخدم أو إلغاء الطلب إذا لزم الأمر.
• طلبات متزامنة: يمكن لـ Axios إجراء عدة طلبات في نفس الوقت ودمجها في استجابة واحدة باستخدام axios.all وaxios.spread.

ما هو Fetch()؟

fetch() هي واجهة برمجة التطبيقات المدمجة التي تأتي مع JavaScript الأصلية. هي واجهة برمجة تطبيقات ويب غير متزامنة تعيد البيانات في شكل وعود. يدعم fetch() جميع المتصفحات الحديثة، لذا لا تحتاج إلى استيراد أي مكتبة خارجية لاستخدامها. بعض الميزات الخاصة بـ fetch() هي:

• الصيغة الأساسية: تحتوي fetch() على صيغة بسيطة ومختصرة تأخذ عنوان URL للمورد الذي تريد استرجاعه كأول معامل وكائن خيارات اختياري كالمعامل الثاني.
• التوافق العكسي: يمكن استخدام fetch() في المتصفحات القديمة التي لا تدعمه عن طريق استخدام polyfill، مثل whatwg-fetch أو fetch-ponyfill.
• قابل للتخصيص: تمنحك fetch() مزيدًا من التحكم في طلباتك واستجاباتك، حيث يمكنك تخصيص رؤوس الطلب والجسم والطريقة والموضع والاعتمادات والذاكرة المؤقتة وإعادة التوجيه وسياسات المحيل.

كيفية استخدام Axios لإجراء طلبات HTTP؟

لاستخدام Axios، تحتاج إلى تثبيته باستخدام npm أو yarn:

npm install axios

وهنا كيفية تثبيت Axios باستخدام yarn:

yarn add axios

إذا كنت تفضل استخدام pnpm، يمكنك تثبيت Axios باستخدام الأمر التالي:

pnpm install axios

بدلاً من ذلك، يمكنك استخدام شبكة توزيع المحتوى (CDN) لتضمين Axios في مشروعك. إليك كيفية تضمين Axios باستخدام CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

ثم، يمكنك استيراده في ملف JavaScript الخاص بك واستخدامه لإجراء طلبات HTTP. على سبيل المثال، لإجراء طلب GET إلى عنوان URL، يمكنك استخدام axios.get():

import axios from 'axios';

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

إجراء طلبات HTTP باستخدام Fetch

لاستخدام fetch()، لا تحتاج إلى تثبيت أي شيء، حيث إنه متوفر بالفعل في المتصفح. يمكنك استخدام وظيفة fetch() لإجراء طلبات HTTP. على سبيل المثال، لإجراء طلب GET إلى عنوان URL، يمكنك استخدام fetch() هكذا:

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

لاحظ أن:

• تقوم Axios تلقائيًا بتحويل البيانات من وإلى JSON، بينما تتطلب fetch() أن تستدعي response.json() لتحليل البيانات إلى كائن JavaScript.
• تقدم Axios البيانات في كائن الاستجابة، بينما توفر fetch() كائن الاستجابة نفسه، الذي يحتوي على معلومات أخرى مثل الحالة، والرؤوس، وعنوان URL.
• تعالج Axios الأخطاء في كتلة catch، بينما ترفض fetch() الوعود فقط إذا كانت هناك خطأ في الشبكة، وليس إذا كان رد الاستجابة يحتوي على حالة خطأ.

الصيغة الأساسية لـ Fetch

بالطبع. سأقدم المحتوى باللغة الإنجليزية، منظمًا في جزئين منفصلين كما طلبت.

الصيغة الأساسية لواجهة برمجة تطبيقات Fetch كما يلي:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('خطأ:', error));

الميزات الرئيسية:

1. عنوان URL كالمعامل الأول، كائن التكوين الاختياري كالمعامل الثاني.
2. تستخدم خاصية body لإرسال البيانات إلى الخادم، مما يتطلب تحويل البيانات إلى سلسلة يدويًا.
3. تُرجع كائن Response يحتوي على معلومات الاستجابة الكاملة.
4. تدخل كتلة catch فقط عند حدوث أخطاء في الشبكة، وليس على رموز حالة خطأ HTTP.
5. تتطلب التحقق اليدوي من رموز حالة الاستجابة لمعالجة أخطاء HTTP.

مثال:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('خطأ HTTP ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('خطأ:', error));

Axios مقابل Fetch: إرسال طلب GET مع معاملات الاستعلام:

// Axios
axios.get('/api/data', {
  params: {
    name: 'أليس',
    age: 25
  }
})
.then(response => {
  // معالجة الاستجابة
})
.catch(error => {
  // معالجة الخطأ
});

// Fetch
const url = new URL('/api/data');
url.searchParams.append('name', 'أليس');
url.searchParams.append('age', 25);

fetch(url)
.then(response => response.json())
.then(data => {
  // معالجة البيانات
})
.catch(error => {
  // معالجة الخطأ
});

Axios مقابل Fetch: إرسال طلب POST مع جسم JSON:

// Axios
axios.post('/api/data', {
  name: 'بوب',
  age: 30
})
.then(response => {
  // معالجة الاستجابة
})
.catch(error => {
  // معالجة الخطأ
});

// Fetch
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'بوب',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  // معالجة البيانات
})
.catch(error => {
  // معالجة الخطأ
});

Axios مقابل Fetch: إعداد وقت مهلة للطلب:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5 ثواني
})
.then(response => {
  // معالجة الاستجابة
})
.catch(error => {
  // معالجة الخطأ
});

// Fetch
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => {
  controller.abort(); // الإنهاء بعد 5 ثواني
}, 5000);

fetch('/api/data', { signal })
.then(response => response.json())
.then(data => {
  // معالجة البيانات
})
.catch(error => {
  // معالجة الخطأ
});

Axios مقابل Fetch: استخدام صيغة async/await:

// Axios
async function getData() {
  try {
    const response = await axios.get('/api/data');
    // معالجة الاستجابة
  } catch (error) {
    // معالجة الخطأ
  }
}

// Fetch
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // معالجة البيانات
  } catch (error) {
    // معالجة الخطأ
  }
}

Axios مقابل Fetch: التوافق العكسي

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

Axios:

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

Fetch:

• واجهة برمجة التطبيقات Fetch هي واجهة برمجة تطبيقات ويب أصلية مدعومة من قبل المتصفحات الحديثة.
• لديها دعم ممتاز في إصدارات المتصفحات الأخيرة، ولكن المتصفحات القديمة (مثل Internet Explorer) لا تدعمها بشكل أصلي.
• إذا كنت بحاجة لدعم المتصفحات القديمة، ستحتاج إلى تضمين polyfill أو استخدام حل احتياطي (مثل XMLHttpRequest).
• نظرًا لأنها واجهة برمجة تطبيقات أصلية، يتم تحديثها وصيانتها تلقائيًا بواسطة بائعي المتصفح، مما يضمن التوافق مع إصدارات المتصفح المستقبلية.

Axios مقابل Fetch: معالجة الأخطاء

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

Axios:

في Axios، إذا حدث فشل في الطلب، يتم إلقاء خطأ ويمكنك معالجة الخطأ بسهولة باستخدام كتلة try-catch والحصول على بيانات الخطأ من error.response.data. على سبيل المثال:

// معالجة الأخطاء في Axios باستخدام try-catch
try {
  const response = await axios.get('/api/data');
  // معالجة الاستجابة
} catch (error) {
  // معالجة الخطأ
  console.log(error.response.data);
}

Fetch:

في Fetch، إذا حدث فشل في الطلب، فإنها لا تلقي خطأ، ولكن تعيد كائن استجابة مع خاصية ok مضبوطة على false. يجب عليك التحقق من خاصية ok وإلقاء خطأ يدويًا إذا كنت تريد استخدام كتلة try-catch.

بدلاً من ذلك، يمكنك استخدام خاصية response.ok لمعالجة حالات مختلفة في طريقة then. على سبيل المثال:

// معالجة الأخطاء في Fetch باستخدام try-catch
try {
  const response = await fetch('/api/data');
  // تحقق من حالة الاستجابة
  if (!response.ok) {
    // إلقاء خطأ إذا لم تكن الحالة حسنة
    throw new Error(`خطأ HTTP! الحالة: ${response.status}`);
  }
  // معالجة الاستجابة
} catch (error) {
  // معالجة الخطأ
  console.log(error.message);
}

// معالجة الأخطاء في Fetch باستخدام response.ok
fetch('/api/data')
  .then(response => {
    // تحقق من حالة الاستجابة
    if (response.ok) {
      // معالجة الاستجابة
    } else {
      // معالجة الخطأ
      console.log(`خطأ HTTP! الحالة: ${response.status}`);
    }
  })
  .catch(error => {
    // معالجة خطأ الشبكة
    console.log(error.message);
  });

اختلاف آخر بين Fetch وAxios هو كيف تعالجان رموز الحالة غير 200. تعتبر Axios أي رمز حالة خارج نطاق 2xx كخطأ وتقوم برفض الوعد. تعتبر Fetch أي رد HTTP صالح (حتى 4xx أو 5xx) نجاحًا وتقوم بحل الوعد.

هذا يعني أنه يجب عليك التعامل مع رموز الحالة غير 200 بشكل مختلف في Fetch وAxios. على سبيل المثال:

// معالجة الأخطاء في Axios لرموز الحالة غير 200
axios.get('/api/data')
  .then(response => {
    // معالجة الاستجابة
  })
  .catch(error => {
    // معالجة الخطأ
    if (error.response) {
      // استجاب الخادم برمز حالة خارج 2xx
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // خطأ في الشبكة أو تم إلغاء الطلب
      console.log(error.message);
    }
  });

// معالجة الأخطاء في Fetch لرموز الحالة غير 200
fetch('/api/data')
  .then(response => {
    // تحقق من حالة الاستجابة
    if (response.ok) {
      // معالجة الاستجابة
    } else {
      // استجاب الخادم برمز حالة خارج 2xx
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // معالجة بيانات الخطأ
    console.log(data);
  })
  .catch(error => {
    // معالجة خطأ الشبكة أو تم إلغاء الطلب
    console.log(error.message);
  });

Axios مقابل Fetch: أيهما أفضل لإجراء طلبات HTTP؟

لا توجد إجابة واضحة على أيهما أفضل، حيث يعتمد ذلك على تفضيلاتك واحتياجاتك. ومع ذلك، إليك بعض الإرشادات العامة لمساعدتك في اتخاذ القرار:

• استخدم Axios إذا كنت تريد وسيلة بسيطة ومريحة لإجراء طلبات HTTP، مع ميزات مثل تحويل بيانات JSON تلقائيًا، مهلة الاستجابة، اعتراضات HTTP، تقدم التنزيل، والطلبات المتزامنة.
• استخدم fetch() إذا كنت تريد وسيلة أصلية وقابلة للتخصيص لإجراء طلبات HTTP، مع ميزات مثل التوافق العكسي، رؤوس مخصصة، جسم، طريقة، وضع، اعتمادات، ذاكرة مؤقتة، إعادة توجيه، وسياسات المحيل.

توليد كود Axios/Fetch باستخدام Apidog

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

إليك العملية لاستخدام Apidog لتوليد كود Axios:

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

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

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

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

استخدام Apidog لإرسال طلبات HTTP

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

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

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

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

الخاتمة

كلا من Axios وfetch() هما طريقتان قويتان وموثوقتان لإجراء طلبات HTTP في JavaScript. يمكنك اختيار ما يناسب مشروعك وأسلوبك بشكل أفضل، أو حتى استخدام كلاهما لأغراض مختلفة. الأمر المهم هو فهم كيفية عملهما وكيفية استخدامهما بفعالية.

استخدام Apidog لا يوفر لك فقط وقتًا وجهدًا ثمينين، بل يضمن أيضًا أن كودك دقيق وخالٍ من الأخطاء. مع واجهته سهلة الاستخدام وميزاته البديهية، يعد Apidog أداة أساسية لأي مطور يعمل على طلبات Axios. برمجة سعيدة!