النسخة البرتغالية

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

أكسيوس

• الميزات المضمنة: يأتي Axios مزودًا بالعديد من الميزات المضمنة، مثل التحويل التلقائي لـ JSON، واعتراضات الطلب والاستجابة، وإلغاء الطلب.
• توافق المتصفح: يدعم المتصفحات الأقدم، بما في ذلك Internet Explorer.
• معالجة الأخطاء: يرفض Axios تلقائيًا الوعود المتعلقة بحالات خطأ HTTP (مثل 404 أو 500)، مما يجعل معالجة الأخطاء أسهل.
• اعتراضات الطلب/الاستجابة: تتيح لك تعديل الطلبات أو الاستجابات على مستوى العالم بطريقة بسيطة.
• طلب الإلغاء: يقدم Axios طريقة سهلة لإلغاء الطلبات.

أحضر

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

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

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

مثال الاستخدام

أكسيوس:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

أحضر:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

ملحوظات:

• لإرسال البيانات، يستخدم fetch() خاصية الجسم لطلب POST، بينما يستخدم Axios خاصية البيانات.
• يتم تحويل البيانات الموجودة في fetch() إلى سلسلة باستخدام طريقة JSON.stringify.
• يقوم Axios تلقائيًا بتحويل البيانات التي يتم إرجاعها من الخادم، ولكن باستخدام fetch()، تحتاج إلى استدعاء الأسلوب Response.json() لتحليل البيانات إلى كائن JavaScript.
• باستخدام Axios، يمكن الوصول إلى استجابة البيانات المقدمة من الخادم داخل كائن البيانات، بينما في طريقة الجلب () يمكن تسمية البيانات النهائية بأي متغير.

خاتمة

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

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

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

لمزيد من المعلومات: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59