إستعمال Axios أو Fetch في React.js؟

يوجد بعض الاختلافات بين ال fetch  و الاكسيوس ساوضح بعضها كالتاللي :

• fetch لا يوجد تحويل مباشر الي صيغة json  بما معناه النتيجة الراجعه لن تكوم على شكل json و عليك اولا استقبال القيمة و من ثم تحويلها فيما يخص axios  فانه يستقبل القيمة و يحولها فورا 
• اكسيوس يدعم تحديثات البراوزر اكثر من الفيتش حيث ان fetch  تدعم فقط  Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1
• fetch تستخدم قيمة الbody  اكسيوس يستخدم قيمة data  ,و كما قلنا بالاعلى اكسيوس يحتوي على قيمة اوبجت اما الفيتش فسوف تحتاج الى استخدام json.stringified  او  json.pars لتحويل المعلومات الي الصيغة المرادة 

• يسمح Axios بإلغاء الطلب وانتهاء مهلة الطلب اما الفيتش فلا يسمح بذلك 

• fetch بلد ان لذلك لست بحاجة الى تنصيبها للاستخدامها اما ال axios فإنك بحاجة الى تنصيب الملف 

ليس من الخطأ استخدام fetch و لكن من الافضل استخدام مكتبة لها دعم اكبر في المتصفحات كما انها اكثر سهولة و مرونة 

أولاً fetch دالة جاهزة في ال javascript بينما axios مكتبة تحتاج لإستدعائها

بالطبع ليس خطأ والفرق بينهما بسيط ويمكن لكلاهما القيام بنفس الشئ والفرق بينهما

• fetch لا تدعم IE 11 بينما axios تدعمه
• عند عمل request يجب أن تقوم بتنفيذ الدالة  json() function لل response بينما لا نقوم بذلك في axios
• يجب عليك تحويل ال object ل json في ال fetch بينما لا نقوم بذلك في ال axios
• أعتقد أنه لا يمكنك العمل مع ال service worker لل PWA باستخدام axios فقط fetch

لذلك يمكنك استخدام كلاهما بدون مشاكل ولكن في التطبيقات الكبيرة ربما تسهل ال axios العمل عن ال fetch

ليس من الخطأ استعمال fetch عوضا عن axios فكلاهما مكتبتان لطلبات الhttp مثلها مثل :

• Node http
•  node-fetch
• fetch-polyfill
• reqwest

.. وغيرها الكثير .. و اختيار مكتبة الاجاكس قد يخضع لعدة معايير نذكر منها : 

1.  دعم المتصفحات , فالمكتبة التي تدعمها أغلب المتصفحات تكون لها الأفضلية . على سبيل المثال فإن fetch لا تعمل في النسخة 11 من انترنت اكسبلورر و لا توجد طريقة لتحقيق ذلك كون fetch طريقة تخص المصتفح في حين أن مكتبة axios تعمل في كلها . 
2.  مهلة الاستجابة  , و أقصد بهذا التحكم في المهلة الاختيارية قبل إحباط الطلب فليست كل المكتبات توفر هاته الميزة , وإن كانت فليست كلها توفرها بطريقة بسيطة وسهلة مثل تلك التي تقدمها مكتبة axios .
3.  التحويل التلقائي للبيانات الى صيغة JSON . رغم أن العملية جد بسيطة و لا تحتاج الا عمل parse للبيانات المستدعية عن طريق الـAPI لكن الافضلية تبقى لمن يبسط العمليةإاكثر . فعلى سبيل المثال تحتاج لتحويل البيانات الى json باستعمال fetch عن طريق : 

// fetch()
fetch('https://my.api.co/api/v1/items')
  .then(response => response.json())    // تحويل
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));

في حين أنك باستعمال axios لن تضطر لتحويلها : 

// axios
axios.get('https://my.api.co/api/v1/teachers')
  .then(response => {
    console.log(response.data); // لا حاجة لتحويل البيانات
  }, error => {
    console.log(error);
  });

        و طبعا , كود أقصر يعني كود أفضل . وقس على ذلك العشرات من طلبات الـ HTTP .

        4. اعتراضات HTTP أو ( HTTP interceptors ) : القدرة على اعتراض طلبات الHttp بشكل globally مفهوم ستحتاج للتعامل معه بشكل كبير في بناء تطبيقات الصفحة الواحدة SPA و تطبيقات الويب التقدمية , فقبل عرض أي نتائج  تحتاج طبعا إلى فحص طلبات HTTP ( كأن تتفحص حالة الطلب أو كود الحالة ) ومن ثم التصرف بناءا عليها , كالتسجيل والمصادقة و ما إلى ذلك , ولن تضطر لكتابة رمز منفصل لكل طلب HTTP. و مكتبة axios تجعل الأمر جد سهل فعلى سبيل المثال : 

// تعريف بملف اعداد axios 
axios.interceptors.request.use(response => response, config => {
  
  // يشير الكود 403 في توثيق الاي بي اي لهذا التطبيق الى ان التوكن قد استهلك استعماله وهو غير صالح  
  if(response.data.status == 403){
          alert('يرجى اعادة تسجيل الدخول');
  }

  return config;
});

// هنا يمكنك ارسال طلب 

في حين أن مكتبة fetch لا توفر طريقة مباشرة لإعتراض الطلبات و هذا ما يجعل axios إفضل بهاته التقطة .

و كنقطة فرعية لا ينبغي إغفال المجتمع المستعمل لمكتبة axios في الـ vue و الreact الangular و الnode و غيرها , و كونها شعبية يعني وفرة المعلومة و سهولة الوصول إليها , وهذا شيء نحتاجه كمطورين .

اما عن رأيي الشخصي فأفضل استعمال مكتبة axios , فهي توفر كود أقصر و أفضل قراءة . و لها شعبية مستعملين كبيرة و واسعة , كما أنها سهلة الادارة و الاعداد .

وفي النهاية يبقى الاختيار لك , فـ axios توفر حزمة مضغوطة لمعظم إحتياجات اتصال HTTP الخاصة بك. ومع ذلك , فان استخدام طريقة fetch التي توفرها متصفحات الويب لا تحتاج منك استدعاء و استعمال عميل HTTP API . فذلك شيء يحدده درجة تعقيد مشروعك و تعاملك مع الAPI و حاجتك لمختلف مفاهيم اتصال HTTP الخاصة بك . 

ليس من الخطأ أبدا استخدام Fetch ولكن أغلب المطورين يلجئون إلى إستخدام axios لعدة مميزات لعل من أشهرها هو التالي

1- تقليل الكود المكتوب فعلى سبيل المثال إذا أخذنا الكود المرفق في السؤال وكتبناه بإستخدام axios فسيكون كالتالي 

useEffect(() => {
    axios("https://api.example.com/items")
      .then((result) => {
        setIsLoaded(true);
        setItems(result.data);
      })
      .catch((error) => {
        setIsLoaded(true);
        setError(error);
      });
  }, []);

حيث تم توفير خطوة التي كنا نقوم فيها بالتحويل إلى JSON 
2. تضمين بعض الأمور من أجل الحماية بشكل تلقائي على سبيل المثال XSRF إختصار ل "Cross-site request forgery" أو ما يسمى ب "تزوير الطلب عبر المواقع" مثال

axios.post('/signup',{
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
});

3. ماذا لو قمت بإنشاء طلب بإستخدام axios وأردت إلغاء هذا الطلب على الفور لأنه يأخذ وقت طويل مثلا يمكنك القيام بذلك مباشرة بإستخدام axios بشكل إفتراضي بإستخدام "CancelToken" و "cancel()"
4. متابعة عملية رفع ملف مثلا وتتبع تقدم عملية الرفع باستخدام 

const config = {
    onUploadProgress: progressEvent => {
       console.log(progressEvent.loaded);
    }
}
axios.put(`${URL}/upload/image.png`, data, config)

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

وغيرها من المميزات المدمجه في axios والتي تساعدنا في إنجاز عدة أمور دون كتابتها من الصفر.
ولعلنا هنا نحتاج إلى أن نركز على أن axios هي مكتبة خارجيه تم إدماج العديد من المميزات بها من قبل المطورين القائمين عليها حتى تقوم بتسهيل الكثير من الأمور ولذا يمكننا إستخدامها مثلا في المتصفح والسيرفر ولكن fetch هي موجوده بشكل إفتراضي في جافا سكريبت ولها وظيفة واحده وأساسيه ولذا هنا سبب الفارق بينهما.

إليك كيفية استخدام Axios لإرسال طلب POST برؤوس مخصصة إلى عنوان URL. يحول Axios البيانات تلقائيًا إلى JSON ، لذلك لا داعي لذلك.

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 17,
    b: 25
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

قارن الآن الشيفرة فوق  بإصدار fetchالذي ينتج نفس النتيجة:

const url = 'http://localhost/test.htm';
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 17,
    b: 25
  })
};

fetch(url, options)
  .then(response => {
    console.log(response.status);
  });

لاحظ أن:

• لإرسال البيانات ، تستخدم fetch خاصية body ، بينما يستخدم Axios خاصية data
• البيانات في fetch تكون strigified
• يتم تمرير عنوان URL كوسيطة ل fetch و في Axios يتم تعيين عنوان URL في كائن الخيارات

إذا كنت تريداستخدام axios فهي عبارة عن مكتبة ويجب عليك إضافتها 

أما fetch فلا تحتاج لإضافة أي شيء فهو موجود في المتصفح نفسه

أهم مايميز axios عن fetch هو أن axios

• يختصر الكود الذي كنت ستكتبه بإستخدام fetch وهنا ميزة أخرى وهي عدم الوقوع في الأخطاء في الكود الذي كنت ستكتبه بإستخدام fetch
• وايضا axios يقوم تلقائيا بتحويل بيانات الطلب والاستجابة بينما إذا استخدامت fetch كنت ستعمل ذلك يدوياً

لا يوجد أي خطأ في استعمال fetch أو axios 

• فإذا كنت تفضل أن يكون الكود مختصر و والتحويل يكون تلقائي فيمكنك استخدام axios
• أما إذا كنت مهتم بجعل حجم الصفحة صغيرة بقدر الإمكان وعدم إضافة مكتبات يمكن الإستغناء عنها لكي لاتزيد من حجم الصفحة فيمكنك استخدام fetch

يمكنك أيضاً بناء دالة بنفسك تمتلك نفس ميزات axios وهذه الدالة تقوم بإستخدام fetch ولن تحتاج لإضافة أي مكتبة