Axios هي مكتبة JavaScript معروفة. إنه عميل HTTP يستند إلى وعد للمستعرضات و Node.js. إذا كنت تعمل كمبرمج جافا سكريبت في السنوات القليلة الماضية ، فمن المؤكد أنك استخدمت هذه المكتبة. في أكتوبر 2019 ، تم تنزيل حزمة Axios من npm 25 مليون مرة. يبدو أن مستقبل Axios غائم. ولكن ماذا لو قلت لك أن أكسيوس هو مشروع ميت. هذا هو بالضبط ما كان
النقاش حول رديت حول. وهي نتحدث عن ما يلي:
- يمتلك مستودع Axios GitHub مستوى منخفض جدًا من نشاط المطورين.
- يتم تجاهل المشاكل والعلاقات العامة.
- فريق التطوير صامت.
يتفاقم الوضع بسبب
الضعف الذي نوقش على نطاق واسع. تم الإبلاغ عن مشكلة عدم الحصانة هذه في عام 2017. تجاهلها مؤلفو المشروع لأكثر من عامين.
عندما أصبحت مكتبة Axios شائعة ، لم يكن لدى المتصفحات واجهة برمجة تطبيقات تقوم بتنفيذ عميل HTTP يستند إلى الوعد. كانت واجهة طلب HTTP HTTP القياسية (XHR) غير مريحة ، وكان من الصعب التعامل معها. قبل المطورين بسرور أكسيوس بسبب حقيقة أن هذه المكتبة جعلت حياتهم أسهل.
تم إصدار Fetch API في عام 2015. لماذا لا نزال نستخدم Axios في عام 2019؟ دعونا نقارن هاتين التقنيتين.
حجم رمز القالب
▍Fetch
fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => console.log(json))
▍Axios
axios.get("https://jsonplaceholder.typicode.com/todos/1") .then(response => console.log("response", response.data))
عند استخدام Fetch ، عليك التعامل مع وعدين. ولكن عند العمل مع Axios ، لدينا وصول مباشر إلى JSON ينتج عنه خاصية
data كائن الاستجابة.
تأخذ طريقة mixin
json() دفق
استجابة json() تمامًا. تقوم بإرجاع وعد تم حلها بواسطة نتيجة JSON لتحليل النص الأساسي للطلب.
تحتاج إلى استخدام المزيد من التعليمات البرمجية المميزة في الجلب عند العمل مع طلبات POST.
▍Fetch
fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: JSON.stringify({ title: "Title of post", body: "Post Body" }) }) .then(res => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(data => console.log(data)) .catch(error => console.log(error));
▍Axios
axios .post("https://jsonplaceholder.typicode.com/posts", { title: "Title of post", body: "Body of post" }) .then(response => console.log(response.data)) .catch(error => console.log(error));
يؤدي استخدام Axios إلى تجنب كتابة كميات كبيرة من التعليمات البرمجية المعينة ويجعل الكود أكثر نظافة وضوحًا.
خطأ في التعامل
▍Fetch
fetch("https://jsonplaceholder.typicode.com/todos/100000") .then(response => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(data => console.log("data", data)) .catch(error => { console.log("error", error); });
▍Axios
axios .get("https://jsonplaceholder.typicode.com/todos/100000") .then(response => { console.log("response", response); }) .catch(error => { console.log("error", error); });
تقارير مكتبة Axios عن أخطاء في الشبكة ، لكن واجهة برمجة التطبيقات Fetch API لا تفعل ذلك. عند العمل مع Fetch ، تحتاج دائمًا إلى التحقق من خاصية
response.ok . لتبسيط حل هذه المشكلة ، يمكن إصدار التحقق من هذا الخطأ كدالة منفصلة:
const checkForError = response => { if (!response.ok) throw Error(response.statusText); return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000") .then(checkForError) .then(data => console.log("data", data)) .catch(error => { console.log("error", error); });
الميزات المفقودة
يمكن لـ Axios مراقبة تقدم عملية تحميل البيانات. إحضار لا يدعم هذا. قد يكون هذا عاملاً حاسماً في اختيار التكنولوجيا لأولئك الذين يقومون بتطوير تطبيق يتيح للمستخدمين تحميل الصور أو ملفات الفيديو إلى الخادم.
const config = { onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config);
المكتبات البديلة
إليك بضعة بدائل لـ Axios و Fetch API:
- Ky عبارة عن عميل HTTP مصغر وذكي يستند إلى
window.fetch . - Superagent هي مكتبة عميل HTTP تقدمية صغيرة تستند
XMLHttpRequest .
النتائج
ما الذي يجب استخدامه في عام 2019؟ ذلك يعتمد على الكثير. على سبيل المثال ، إذا كنت بحاجة إلى تتبع التقدم المحرز في تحميل المواد إلى خادم ، فإن Axios أو Superagent هو الأفضل لك. إذا كنت تستطيع معالجة قيود Fetch ، فمن الأفضل استخدام واجهة برمجة التطبيقات هذه. ولتحسين رمز الجلب قليلاً ، جرب مكتبة مجمعات مثل Ky.
أعزائي القراء! ما عملاء HTTP التي تستخدمها في مشاريعك؟
