في مشهد تطوير الويب المتغير باستمرار، أصبحت القدرة على إجراء طلبات غير متزامنة واسترجاع البيانات من الخوادم جزءًا لا يتجزأ من بناء تطبيقات الويب الديناميكية والتفاعلية. على مدى سنوات، كان كائن XMLHttpRequest (XHR) هو الأداة المفضلة للمطورين لتحقيق هذه الوظيفة. ومع ذلك، مع تقديم واجهة برمجة التطبيقات Fetch، دخل منافس جديد الحلبة، واعدًا بطريقة أبسط وأكثر حداثة للتعامل مع الطلبات غير المتزامنة. في هذه المقالة، سنغوص عميقًا في المعركة بين XMLHttpRequest وFetch، نستكشف نقاط قوتهم وضعفهم، ومتى يجب استخدام أحدهما بدلًا من الآخر.
ما هو XML؟ فهم XMLHttpRequest
قبل أن نتمكن من تقدير واجهة برمجة التطبيقات Fetch بشكل كامل، من المهم فهم كائن XMLHttpRequest القائم منذ زمن طويل. على الرغم من اسمه، إلا أن XMLHttpRequest له علاقة قليلة جدًا بـ XML هذه الأيام؛ إذ يُستخدم بشكل أساسي لإجراء طلبات HTTP لاسترجاع البيانات من الخوادم، بغض النظر عن تنسيق البيانات (XML، JSON، نص، إلخ).
XMLHttpRequest موجودة منذ الأيام الأولى لتطوير الويب ولعبت دورًا حاسمًا في تمكين تقنيات مثل AJAX (JavaScript غير المتزامن وXML) وظهور التطبيقات ذات الصفحة الواحدة (SPAs). وعلى الرغم من أنها خدمتنا جيدًا، إلا أن XMLHttpRequest يمكن أن تكون مطولة وصعبة التعامل معها، وغالبًا ما تتطلب كمية كبيرة من الكود الأساسي للتعامل مع سيناريوهات مختلفة، مثل التحقق من حالة الطلب، ومعالجة الأخطاء، وتحليل بيانات الاستجابة.
ادخل Fetch API: نهج حديث ومبسط
تم تقديم واجهة برمجة التطبيقات Fetch كجزء من معيار ES6 (ECMAScript 2015)، بهدف تقديم طريقة أكثر حداثة وبساطة ومتوافقة مع المعايير لإجراء الطلبات غير المتزامنة في JavaScript. على عكس XMLHttpRequest، الذي تم تطويره في البداية كواجهة برمجة تطبيقات محددة لمتصفح، فإن واجهة برمجة التطبيقات Fetch هي معيار ويب، مما يعني أنه يجب أن تعمل بشكل متسق عبر المتصفحات المختلفة (مع وجود polyfills مناسبة للمتصفحات القديمة).
واحدة من المزايا الرئيسية لواجهة برمجة التطبيقات Fetch هي نهجها القائم على الوعود. بدلاً من التعامل مع ردود الاتصال المعتمدة على الأحداث مثل XMLHttpRequest، تعيد واجهة برمجة التطبيقات Fetch وعدًا، مما يسمح للمطورين بسلسلة العمليات اللاحقة باستخدام طرق .then() و.catch(). وهذا يؤدي إلى كود أنظف وأسهل قراءة وقدرات أفضل في معالجة الأخطاء.
البساطة والقراءة: ميزة Fetch API
عندما يتعلق الأمر بالبساطة والقراءة، فإن واجهة برمجة التطبيقات Fetch لديها ميزة واضحة على XMLHttpRequest. اعتبر الأمثلة التالية:
XMLHttpRequest:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// افعل شيئًا ما مع البيانات
} else {
// معالجة الخطأ
}
};
xhr.onerror = function() {
// معالجة الخطأ
};
xhr.send();
Fetch API:
fetch('https://api.example.com/data')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('لم تكن استجابة الشبكة جيدة.');
}
})
.then(data => {
// افعل شيئًا ما مع البيانات
})
.catch(error => {
// معالجة الخطأ
});
كما ترى، فإن كود واجهة برمجة التطبيقات Fetch أكثر اختصارًا، وأسهل قراءة، ويتبع تدفقًا أكثر خطية باستخدام الوعود. يمكن أن يؤدي ذلك إلى تحسين إمكانية صيانة الكود وتجربة تطوير أكثر سلاسة، خاصةً للمطورين المعروفين ببنية JavaScript الحديثة وأنماطها.
معالجة الأخطاء وإلغاء الطلبات باستخدام XMLHttpRequest وFetch API
معالجة الأخطاء هي مجال آخر تتألق فيه واجهة برمجة التطبيقات Fetch. مع XMLHttpRequest، قد تكون معالجة الأخطاء معقدة بعض الشيء، حيث تحتاج إلى الاعتماد على أحداث مختلفة وأكواد الحالة لتحديد ما إذا حدث خطأ وكيفية التعامل معه. بينما تقدم واجهة برمجة التطبيقات Fetch نهجًا أكثر انسيابية لمعالجة الأخطاء من خلال آلية رفض الوعد.
بالإضافة إلى ذلك، تقدم واجهة برمجة التطبيقات Fetch القدرة على إلغاء الطلبات، وهو ما لم يكن ممكنًا مع XMLHttpRequest. يمكن أن يكون هذا مفيدًا بشكل خاص في السيناريوهات التي تحتاج فيها إلى إلغاء طلب طويل، مثل عندما يتنقل المستخدم بعيدًا عن الصفحة أو عند استيفاء شروط معينة.
دعم المتصفح وPolyfills
بينما تعد واجهة برمجة التطبيقات Fetch معيار ويب حديث، من المهم ملاحظة أنه قد لا يتم دعمها في المتصفحات القديمة. ومع ذلك، يمكن معالجة هذه المشكلة بسهولة من خلال استخدام polyfills أو تحويل الكود الخاص بك باستخدام أدوات مثل Babel.
بالنسبة لـ XMLHttpRequest، فإن دعم المتصفح عمومًا ليس مصدر قلق، حيث أنها موجودة منذ فترة طويلة ومدعومة في جميع المتصفحات الحديثة. ومع ذلك، يجب أن تضع في اعتبارك أن بعض الميزات أو السلوكيات في XMLHttpRequest قد تختلف قليلاً عبر إصدارات المتصفح المختلفة وتنفيذاتها.
متى يجب استخدام XMLHttpRequest مقابل Fetch API
إذًا، متى يجب عليك استخدام XMLHttpRequest، ومتى يجب عليك اختيار واجهة برمجة التطبيقات Fetch؟ إليك بعض التوجيهات العامة:
استخدم XMLHttpRequest عندما:
- تحتاج إلى دعم المتصفحات القديمة التي لا تدعم واجهة برمجة التطبيقات Fetch بشكل أساسي، ولا يمكنك أو لا تريد استخدام polyfills.
- تتطلب ميزات متقدمة أو تحكمًا في دورة حياة الطلب التي لا تقدمها واجهة برمجة التطبيقات Fetch بشكل افتراضي.
- تعمل على قاعدة شفرة قائمة تعتمد بشكل كبير على XMLHttpRequest، وإعادة هيكلة إلى واجهة برمجة التطبيقات Fetch ستكون مزعجة جدًا.
استخدم واجهة برمجة التطبيقات Fetch عندما:
- تبني تطبيق ويب حديث وليس لديك حاجة لدعم المتصفحات القديمة أو أنك مستعد لاستخدام polyfills.
- تُقدّر البساطة والقراءة ونهجًا أكثر حداثة في إجراء الطلبات غير المتزامنة.
- تحتاج إلى الاستفادة من ميزات مثل إلغاء الطلبات أو تحسين قدرات معالجة الأخطاء.
- تبدأ مشروعًا جديدًا وتريد ضمان المستقبل لقاعدة الشفرة الخاصة بك باستخدام أحدث معايير الويب.
توليد كود XMLHttpRequest وFetch باستخدام Apidog
Apidog هي منصة تطوير واجهات برمجة التطبيقات التعاونية الشاملة التي توفر مجموعة أدوات شاملة لتصميم، وتصحيح، واختبار، ونشر، وتزوير واجهات برمجة التطبيقات. تمكّن Apidog منك إنشاء كود XMLHttpRequest تلقائيًا لإجراء طلبات HTTP.
إليك العملية لاستخدام Apidog لتوليد كود XMLHttpRequest:
الخطوة 1: افتح Apidog واختر طلبًا جديدًا
الخطوة 2: أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات التي تريد إرسال طلب إليها، وأدخل أي رؤوس أو معلمات سلسلة استعلام ترغب في تضمينها مع الطلب، ثم انقر على "تصميم" للانتقال إلى واجهة التصميم في Apidog.
الخطوة 3: حدد "توليد كود العميل" لتوليد كودك.
الخطوة 4: انسخ الكود المولد والصقه في مشروعك.
استخدام Apidog لإرسال طلبات HTTP
Apidog تقدم العديد من الميزات المتقدمة التي تعزز قدرتها بشكل أكبر لاختبار طلبات HTTP. تتيح لك هذه الميزات تخصيص طلباتك والتعامل مع سيناريوهات أكثر تعقيدًا بسهولة.
الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.
الخطوة 2: ابحث أو أدخل يدويًا تفاصيل واجهة برمجة التطبيقات لطلب POST الذي تريد إجراءه.
الخطوة 3: املأ المعلمات المطلوبة وأي بيانات ترغب في تضمينها في جسم الطلب.
الخاتمة
في المعركة بين XMLHttpRequest وFetch API، لا يوجد فائز واضح أو خاسر. كلاهما له نقاط قوتها وضعفها، والاختيار يعتمد في النهاية على متطلبات مشروعك وظروفه المحددة.
مع ذلك، تمثل واجهة برمجة التطبيقات Fetch مستقبل الطلبات غير المتزامنة في تطوير الويب. إن بساطتها، ونهجها القائم على الوعود، وامتثالها لمعايير الويب الحديثة تجعلها خيارًا جذابًا للمطورين الذين يقومون ببناء تطبيقات جديدة أو إعادة هيكلة قواعد الشيفرة الموجودة.
ومع ذلك، من المهم تذكر أن XMLHttpRequest كانت حاملة موثوقة لسنوات ومن المحتمل أن تبقى ذات صلة لفترة من الوقت، خاصة في قواعد الشيفرة القديمة أو عندما يكون دعم المتصفحات القديمة شرطًا.
إن استخدام Apidog لا يوفر لك وقتًا وجهدًا قيمين فحسب، بل يضمن أيضًا أن يكون كودك دقيقًا وخالٍ من الأخطاء. بفضل واجهته سهلة الاستخدام وميزاته البديهية، يعد Apidog أداة لا غنى عنها لأي مطور يعمل مع XMLHttpRequest وFetch API.