مقدمة
تمثل Fetch API تطورًا كبيرًا في كيفية تفاعل تطبيقات الويب مع الخوادم واسترداد المحتوى عبر الشبكة. تم تقديم Fetch API كبديل حديث لـ XMLHttpRequest (XHR)، وهو يوفر المزيد من القوة والمرونة والبساطة للمطورين. ومن خلال دمجه في المتصفحات الحديثة، أصبح Fetch أداة حاسمة في بناء تطبيقات الويب المعاصرة، مما يتيح معالجة أكثر طبيعية وكفاءة للعمليات غير المتزامنة.

ما هي واجهة برمجة تطبيقات الجلب؟
Fetch API عبارة عن واجهة JavaScript تعمل على تبسيط إرسال طلبات HTTP ومعالجة استجابات الشبكة. على عكس XMLHttpRequest الأقدم، والذي كان مشهورًا بتعقيده وصياغته المعقدة، يوفر Fetch واجهة مبسطة تتكامل بسلاسة مع واجهة برمجة تطبيقات Promise الخاصة بـ JavaScript. لا يعمل هذا التكامل على تسهيل إدارة العمليات غير المتزامنة فحسب، بل يعمل أيضًا على تحسين إمكانية قراءة التعليمات البرمجية وقابلية صيانتها، مما يجعل قاعدة التعليمات البرمجية الخاصة بك أكثر وضوحًا وأكثر قابلية للإدارة.

تم تصميم Fetch في جوهره حول وظيفة fetch()، وهي وظيفة عامة متوفرة في المتصفحات الحديثة التي ترسل طلب الشبكة. تُرجع هذه الوظيفة وعدًا يتحول إلى كائن استجابة، مما يوفر للمطورين إمكانية الوصول بسهولة إلى بيانات الاستجابة والعناوين والحالة. يتيح ذلك اتباع نهج أكثر سهولة وتنظيمًا للتعامل مع نتائج طلبات الشبكة. (اقرأ المزيد)

التركيب الأساسي
تدور واجهة Fetch API حول وظيفة fetch()، والتي تم تصميمها لتكون بسيطة وقوية. تُستخدم الوظيفة لبدء طلبات الشبكة وتأتي مع وسيطتين أساسيتين:

• عنوان URL: سلسلة عنوان URL للمورد الذي تريد جلبه.
• الخيارات (اختياري): كائن يحتوي على إعدادات أو تكوينات مختلفة للطلب، مثل طريقة HTTP، والرؤوس، ومحتوى النص، والوضع.

هيكل استدعاء الجلب البسيط
تعتبر مكالمة الجلب الأساسية واضحة ومباشرة وتبدو كما يلي:

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• عنوان url هو عنوان المورد المراد جلبه.
• يتعامل الأسلوبthen() مع الوعد الذي تم حله بواسطة Fetch API، مما يوفر كائن الاستجابة.
• تتعامل طريقة الصيد () مع أي أخطاء قد تحدث أثناء الطلب.

مثال لطلب جلب أساسي

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

يوضح هذا المثال كيفية إجراء طلب جلب بسيط، مع تسجيل الاستجابة إلى وحدة التحكم عند النجاح والتعامل مع الأخطاء بأمان.

لماذا نستخدم الجلب؟

مزايا استخدام الجلب

الوعود: من أهم مزايا الجلب هو استخدامه للوعود. توفر الوعود طريقة أنظف وأكثر قابلية للإدارة للتعامل مع المهام غير المتزامنة مقارنة بالنهج القائم على رد الاتصال الخاص بـ XHR. باستخدام Promises، يمكنك ربط أساليب .then() للتعامل مع الاستجابات الناجحة وطرق .catch() لإدارة الأخطاء، مما يؤدي إلى كود أكثر قابلية للقراءة وأسهل في تصحيح الأخطاء.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

بالإضافة إلى ذلك، تقترن واجهة Fetch API بشكل ممتاز مع بناء الجملة غير المتزامن/الانتظار، مما يجعل التعليمات البرمجية غير المتزامنة أكثر وضوحًا.

مثال على استخدام غير المتزامن/الانتظار:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

بناء جملة المنظف: يقدم Fetch بناء جملة حديثًا وأقل تفصيلاً مقارنةً بـ XHR. كائن التكوين الذي تم تمريره إلى fetch() يجعل من السهل تعيين معلمات الطلب مثل طريقة HTTP، والرؤوس، ومحتوى النص، مما يؤدي إلى تعليمات برمجية أكثر وضوحًا وأكثر قابلية للصيانة. (اقرأ المقال كاملاً

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

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

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

إقرأ المقال كاملاً - اضغط هنا

خاتمة
أحدثت واجهة Fetch API ثورة في كيفية قيام المطورين بتقديم طلبات الشبكة في تطبيقات الويب. بفضل تركيبته الواضحة وتكامله السلس مع Promises ودعم الميزات الحديثة مثل المزامنة/الانتظار والبث، يقدم Fetch أداة قوية ومرنة للتعامل مع طلبات HTTP. مع استمرار تطور تطوير الويب، ستظل Fetch API عنصرًا حاسمًا في بناء تطبيقات ويب حديثة وفعالة وقابلة للصيانة.