الفرق مابين fetch و xhr في javascript

fetch تحتوي على ميزات اضافية عن XHR واهمها :

• تستطيع استخدام الـ Cache API مع كل من ال request و الـ response. 
• تمكنك من طلب no-cors requests من مواقع لا تدعم الـ CORS.
• يمكنك ارسال response بشكل بث "Streaming responses" ليست متوفرة بعد في المتصفحات.

بعض الميزات التي توضح الفرق بين الطريقتين:

من أجل fetch:

1. لا يوجد بها طريقة مضمنة للتعامل مع الوثائق.
2. لا توجد طريقة لكي نضع مؤقت.
3. لا يمكن تعديل نوع المحتوى في ترويسة الاستجابة.
4. إذا كان طول المحتوى متوافر و لكن مخفي فإنه من غير الممكن معرفة طول جسم الاستجابة.
5. سوف تقوم باستدعاء ال handler المسؤول عن إجهاض الإشارة حتى لو أن الطلب قد تم بنجاح.
6. لا يوجد مؤشر للتقدم في عملية رفع الملفات.

من أجل XHR:

1. لا يوجد طريقة لعدم إرسال ال cookies بشكل قياسي.
2. لا يمكنها أن تعيد أغراض من FormData.
3. لا تحتوي على مكافئ لنمط no-cors الموجود في fetch.
4. دائماً تتبع إعادة التوجيه redirect.

Fetch هي واجهة برمجة تطبيقات لطلب Ajax حديثة مستندة إلى Promise ظهرت لأول مرة في عام 2015 وهي مدعومة في معظم المتصفحات. لم يتم بناؤه على XMLHttpRequest ويوفر تناسقًا أفضل مع بناء جملة أكثر إيجازًا. تعمل سلسلة Promise التالية بشكل مماثل :

fetch("/url", { method: "GET" })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((err) => console.error("error:", err));

أو يمكنك استخدام ascync / await :

try {
  const res = await fetch("/url", { method: "GET" }),
    // انتظار الرد من سيرفر
    json = await res.json();

  console.log(json);
} catch (err) {
  console.error("error:", err);
}

AJAX هو الإسم المألوف لـ "JavaScript و XML غير المتزامنة" ، على الرغم من أن المطورين  لم يحتاجوا إلى استخدام أساليب غير متزامنة أو JavaScript أو XML. نستخدم الآن المصطلح العام "Ajax" لأي عملية من جانب العميل تجلب البيانات من الخادم وتقوم بتحديث DOM دون الحاجة إلى تحديث صفحة كاملة.

يتم دعم XMLHttpRequest من قبل جميع المتصفحات الرئيسية وأصبح معيارًا رسميًا للويب في عام 2006. مثال بسيط يجلب البيانات من نطاقك / الخدمة / نقطة النهاية ويعرض نتيجة JSON في وحدة التحكم كنص:

const xhr = new XMLHttpRequest();
xhr.open("GET", "/service");

// عند تغير الحالة
xhr.onreadystatechange = () => {
  // هل الإستعلام إكتمل ؟
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // إكتمل بنجاح 
    console.log(JSON.parse(xhr.responseText));
  } else {
    // حدوث خطأ
    console.log("HTTP error", xhr.status, xhr.statusText);
  }
};

// إرسال
xhr.send();

أهم مميزات fetch :

• التحكم في cach
• التحكم في cors
• التحكم في Credential 
• التحكم في redirect
• Data Streams
• الدعم الكلي لجانب الخادم

أهم مميزات XHR:

• تدعم Timeout
• دعم Abort : يمكن إلغاء طلب أثناء الرحلة عن طريق تشغيل أسلوب إحباط XMLHttpRequest (). يمكن إرفاق معالج إحباط إذا لزم الأمر
• تدعم جميع المتصفحات

وهذه مقالة على ajax