طريقة إلغاء Fetch request في Javascript

ملي كاتكون خدام ب Javascript باش تقاد شي موقع إلكتروني , بلا شك راك كاتستعمل شي API باش تحصل على Data, مثلا موقع لعرض الأفلام و المسلسلات, باش تحصل على الأفلام كاتقوم بعمل Http request ل Server. لكن واش فخبارك بإمكانك تلغي هاد ل http request ؟؟

1. علاش غاتحتاج تلغي ل Http request ؟

نرجعو للمثال ديال موقع لعرض الأفلام و المسلسلات و نفتارضو أن واجهة المستخدم فيها زرين, الاول لجلب المسلسلات و الثاني لجلب الأفلام و تحت منهم كاين المكان فين كايتم إظهار النتائج. ملي المستخدم غايبرك على الأفلام , غايتم إنشاء Http request لطلب الأفلام و ملي غاتجي النتيجة غايتم إظهارها للمستخدم. لكن المشكل هو ملي المستخدم غايضغط على الأفلام و غايولي يضغط على المسلسلات قبل ما ترجع Data الخاصة بالأفلام , اللي غايوقع هنا هو أنه غايتم إرسال 2 Http requests و غايتم إظهار Data اللي غا توصل في الأول ثم مسحها و إظهار Data اللي غاتوصل فالأخير, بمعنى أن Request الأبطئ هو اللي غايتم إظهار النتيجة ديالو في الأخير.

باش نتجنبو هاد المشكل غانقومو بإلغاء Request الأول قبل إرسال Request الثاني. هاكا غانتأكدو أن أخر حاجة طلبها المستخدم هي اللي غاتبان فالصفحة.

2. الطريقة :

باش نلغيو ل Http request اللي الدار ب Fetch غانستعملو AbortController اللي هي عبارة عن class , الطريقة على هاد الشكل :

const getMoviesBtn = document.getElementById('movies-btn');
const getSeriesBtn = document.getElementById('series-btn');

let controller;

async function getData(url) {
  if (controller) {
    controller.abort(); // هنا كانقومو بالإلغاء
    controller = null;
  }

  controller = new AbortController();
  const { signal } = controller;

  const response = await fetch(url, { signal: signal });
  controller = null;
  return response.json();
}

getMoviesBtn.addEventListener('click', async function (event) {
  const data = await getData(moviesUrl);
  printDataToTheUi(data);
});

getSeriesBtn.addEventListener('click', async function (event) {
  const data = await getData(seriesUrl);
  printDataToTheUi(data);
});

درنا متغير سميتو controller اللي كايكون بدون قيمة في الأول, من بعد ملي المستخدم كايضغط على شي زر , كانعيطو ل getData اللي مكلفة بعمل ل http request, اول حاجة كانديروها فهاد ل function هي كانشوفو القيمة ديال ل controller إلى كانت true هادشي كايعني باللي كاين شي request مزال ما رجعاتش الإجابة ديالو, كانقومو بإلغاؤو و كانديرو request جديد.

ل controller كايعطينا واحد المتغير سميتو signal اللي خاصنا ضروري نعطيوه ل fetch , حيت كل controller كايلغي فقط request اللي فيه signal ديالو.

3. خلاصة :

هاد التقنية كاتستخدم بزاف فالعديد من المواقع لإلغاء الطلبات الغير مرغوب فيها, حيت مايمكنش تتنبئ بكفاش المستخدم كايستعمل الموقع أو التطبيق ديالك, مثلا يقدر يضغط على نفس الزر بزاف ديال المرات, هادشي مكايعنيش انه غايتم إرسال request في كل ضغطة, بمعنى أنه خاصك تكون واخد الإحتياطات ديالك.