Frontend Academy · درس

AbortController للتنظيف

أنشئ AbortController، ومرّر إشارته إلى fetch، وألغِ الطلبات الجارية في دالة التنظيف لمنع تحديث الحالة في المكوّنات التي أزيل تحميلها.

الدرس 4 من 413 خطوة

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

لماذا تلغي طلبات fetch؟

عند إزالة مكوّن أو إعادة تنفيذ الجلب، قد يظل الطلب السابق قيد التنفيذ. إذا اكتمل بعد الطلب الجديد، فقد تستبدل البيانات القديمة البيانات الحديثة. يلغي AbortController الطلبات قيد التنفيذ بطريقة سليمة.

أساسيات AbortController

أنشئ AbortController، ومرّر signal الخاص به إلى fetch، واستدعِ controller.abort() للإلغاء. يُلقي fetch خطأ AbortError عند إلغائه.

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

في تنظيف useEffect

أنشئ AbortController في بداية التأثير واستدعِ abort() في دالة التنظيف. يؤدي ذلك إلى إلغاء الطلب تلقائيًا عند تغيّر التبعيات أو إزالة المكوّن.

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError مقابل خطأ الشبكة

يُلقي الطلب الملغى DOMException يحمل الاسم 'AbortError'. تحقّق منه دائمًا بشكل محدد، ولا تعرضه كخطأ للمستخدم، لأن حدوثه متوقع أثناء التنظيف.

خاصية signal.aborted

تحقّق من controller.signal.aborted لمعرفة ما إذا كانت الإشارة قد أُلغيت. يفيد ذلك في التحقق قبل استدعاء setState داخل الرمز غير المتزامن.

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

إلغاء طلبات متعددة

يمكن لـ AbortController واحد إلغاء عدة طلبات fetch بتمرير الإشارة نفسها إلى جميع الطلبات.

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

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

AbortController مع Axios

يدعم Axios إشارة AbortController من خلال خيار signal في الإعدادات. وواجهة الإشارة هي نفسها المستخدمة مع fetch.

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

يتولى React Query ذلك تلقائيًا

عند استخدام TanStack Query ‏(React Query)، تتم إدارة الإلغاء بالنيابة عنك. ينشئ React Query وحدات تحكم ويلغيها داخليًا. وهذا أحد أسباب تفضيله على أنماط الجلب اليدوية.

المهلة الزمنية باستخدام AbortController

اجمع بين AbortController وsetTimeout لتنفيذ مهلات زمنية للطلبات.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — اختصار حديث

في المتصفحات الحديثة، تنشئ AbortSignal.timeout(ms) إشارة تُلغى تلقائيًا بعد المدة المحددة من دون الحاجة إلى وحدة تحكم يدوية.

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

التنظيف مهم في React 18 Strict Mode

تعمل React 18 Strict Mode على تركيب التأثيرات مرتين أثناء التطوير. ومن دون تنظيف AbortController، سترى عمليات جلب مزدوجة وتحذيرات محتملة بشأن تحديث الحالة بعد إزالة المكوّن. يمنع نمط التنظيف كلا الأمرين.

تحقق سريع

كيف تمنع استجابة شبكة قديمة من تحديث الحالة بعد إعادة عرض المكوّن؟

أجب عليها في الدرس التفاعلي

مراجعة: AbortController

أنشئ AbortController لكل تأثير. مرّر signal إلى fetch أو axios. ألغِ الطلب في دالة التنظيف. تجاهل AbortError، إذ إن حدوثه متوقع. استخدم signal.aborted قبل setState في الرمز غير المتزامن. يمكن لوحدة تحكم واحدة إلغاء عدة طلبات. استخدم AbortSignal.timeout() للمهلات الزمنية. يتولى React Query كل ذلك تلقائيًا.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «AbortController للتنظيف» مجاني؟

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

ماذا ستتعلم في «AbortController للتنظيف»؟

أنشئ AbortController، ومرّر إشارته إلى fetch، وألغِ الطلبات الجارية في دالة التنظيف لمنع تحديث الحالة في المكوّنات التي أزيل تحميلها. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «AbortController للتنظيف»؟

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

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

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

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

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