AbortController AbortController لإلغاء الطلب
آخر تحديث: 2026-11-03
AbortController AbortController لإلغاء الطلب
AbortController واجهة أصلية في المتصفح: مرّر signal الخاص بها إلى fetch واستدعِ abort() لإلغاء الطلب منتصفه. يستفيد منه فكّ المكوّن وتغيير معامل وبتردد البحث — فإلغاء الطلبات البالية يوفّر النطاق الترددي، والأهم أنه يتفادى سباقًا تطمس فيه استجابة قديمة بيانات جديدة رُسمت بالفعل. ويمكن للمراقب نفسه إلغاء طلبات عدة دفعة، فتغطية تنظيف واحدة كل استدعاءات مفتوحة بدأها المكوّن.
| المجموعة | البيانات والهندسة |
|---|---|
| النوع | واجهة برمجية |
| منذ الإصدار | Native browser API (DOM Living Standard) |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const ctrl = new AbortController()
fetch('/api/search?q=' + kw, { signal: ctrl.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') return // cancelled on purpose, not an error
showError(err)
})
ctrl.abort() // triggers it: fetch rejects with an AbortError⚙️ المعاملات
| signal | نسخة AbortSignal، تُمرَّر لـ fetch كـ options.signal؛ ويمكن لذات الإشارة تسيير عدة طلبات وإلغاؤها كلها دفعة. |
|---|
القيمة المرجعة：يُعيد المُنشئ { signal, abort() }: الإشارة ما يستمع إليه fetch، وabort() يُطلق الإلغاء ويرفض الطلب بـ AbortError.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
النقر على «أرسل الطلب» يدخل حالة التحميل؛ وإن نقرت «إلغاء الطلب» قبل الوصول صار الحالة aborted لا error — الطلب المُلغى لا يحدّث أي واجهة.💡 النقاط الأساسية
⚠️ تحذير الإلغاء ليس خطأً: يجب أن يتعرّف الـ catch وحده على err.name === 'AbortError'، وإلا ظهر إلغاءٌ مقصود للمستخدم كعطل.
💡 نصيحة إلغاء الطلب السابق في تنظيف Effect هو الدواء المعتاد لسباق يخلط البيانات عند تبديل التبويبات سريعًا.
ℹ️ ملاحظة يمكن تمرير ذات الإشارة لمستمعي الأحداث (خيار signal في addEventListener)، فيلغي abort واحد الجميع.
🏷️ المزيد من البيانات والهندسة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل يمكن استئناف طلب مُلغى؟
ج لا، الاتصال أُغلق بالفعل. إن احتجت إيقافًا واستئنافًا نفّذ صفًّا بنفسك، أو أعد إطلاق الطلب.
س هل AbortError نفس المهلة الزمنية؟
ج لا. تُنفَّذ المهلة بـ setTimeout(() => ctrl.abort(), 5000)، وفي المتصفحات الأحدث AbortSignal.timeout(5000) يفعلها بسطر.
س لماذا نُلغي الطلب عند فك تركيب المكوّن؟
ج بعد فك التركيب لم يعد المكوّن بحاجة للبيانات؛ ترك الطلب يهدر النطاق وقد تكتب استجابته بيانات بالية في رسم لاحق.
