JavaScript Academy · درس

إلغاء الطلبات باستخدام AbortController

ألغوا الطلبات الجارية بطريقة سليمة.

إلغاء الطلبات باستخدام AbortController درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

لماذا نلغي طلبًا

تبدأ أحيانًا طلبًا لم تعد بحاجة إليه: ينتقل المستخدم إلى صفحة أخرى، أو يكتب بحثًا جديدًا، أو تنقضي مهلة زمنية. يتيح لك AbortController إلغاء عملية fetch الجارية.

إنشاء وحدة تحكم

أنشئ AbortController. فهو يوفّر signal تمرره إلى fetch، وطريقة abort() للإلغاء.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

تمرير الإشارة

مرّر إشارة وحدة التحكم إلى fetch عبر كائن الخيارات. أصبح الطلب قابلًا للإلغاء الآن.

fetch(url, { signal: controller.signal });

استدعاء abort

استدعِ controller.abort() للإلغاء. تُرفض Promise الخاصة بـ fetch المعلّقة باستخدام AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

التقاط AbortError

ميّز الإلغاء المتعمد عن الفشل الحقيقي من خلال التحقق من err.name === "AbortError" داخل catch.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

نمط المهلة الزمنية

ادمج ذلك مع setTimeout لإلغاء الطلبات البطيئة تلقائيًا. امسح المؤقت إذا اكتمل الطلب أولًا.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

مساعد المهلة المضمّن

توفر البيئات الحديثة AbortSignal.timeout(ms)، التي تعيد إشارة تُلغي العملية تلقائيًا. وهذا أوضح من إعداد setTimeout بنفسك.

fetch(url, { signal: AbortSignal.timeout(5000) });

إلغاء البحث السابق

في البحث أثناء الكتابة، ألغِ الطلب السابق قبل بدء طلب جديد. يمنع ذلك الاستجابات القديمة من الكتابة فوق النتائج الأحدث.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

إشارة واحدة وعمليات fetch متعددة

يمكن لإشارة واحدة إلغاء عدة طلبات في آن واحد. مرّر الإشارة نفسها إلى عدة عمليات fetch، وسيؤدي استدعاء abort() واحد إلى إلغائها جميعًا.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

الإشارات المُلغاة مسبقًا

إذا كانت الإشارة قد أُلغيت مسبقًا عند تمريرها إلى fetch، يُرفض الطلب فورًا. تحقّق من signal.aborted إذا احتجت إلى معرفة حالتها.

if (controller.signal.aborted) console.log("already cancelled");

التنظيف عند إزالة المكوّن

في واجهات المستخدم القائمة على المكوّنات، ألغِ الطلبات الجارية عند تدمير المكوّن لتجنب ضبط الحالة لكائن لم يعد موجودًا.

const controller = new AbortController();
// on teardown:
controller.abort();

اختبار سريع

إلغاء طلبات fetch.

مراجعة

أنشئ AbortController، ومرّر signal الخاصة به إلى fetch، واستدعِ abort() للإلغاء. تُرفض Promise باستخدام AbortError، ويمكنك اكتشافه من خلال اسمه. استخدم ذلك للمهلات الزمنية (AbortSignal.timeout)، وإلغاء البحث السابق، وإلغاء عدة طلبات، والتنظيف عند إنهاء المكوّن.

الأسئلة الشائعة

هل درس «إلغاء الطلبات باستخدام AbortController» مجاني؟

نعم — نص درس «إلغاء الطلبات باستخدام AbortController» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «إلغاء الطلبات باستخدام AbortController»؟

ألغوا الطلبات الجارية بطريقة سليمة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إلغاء الطلبات باستخدام AbortController»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy