شرح صفوف ومحتوى الفقرة
قد يظل طلب الشبكة معلقاً على الاتصالات الضعيفة طويلاً؛ لذا اربط الطلب بإشارة AbortController واستدعِ ctrl.abort() عند انتهاء المهلة أو كتابة استعلام أحدث مع فحص err.name === "AbortError" بهدوء.
تذكّر كذلك أن طلب البيانات من نطاق خارجي يخضع لسياسة مشاركة الموارد عبر الأصول (CORS) في المتصفح؛ إذ يجب أن يرسل الخادم البعيد نفسه حقل الرأس Access-Control-Allow-Origin للسماح لموقعك بقراءة الاستجابة.
const ctrl = new AbortController();
const out = document.getElementById('ab-out');
const blob = new Blob(['{"status":"Ready"}']);
const timer = setTimeout(() => ctrl.abort(), 2000);
fetch(URL.createObjectURL(blob), { signal: ctrl.signal })
.then((r) => r.json())
.then((d) => { out.textContent = 'Fetched: ' + d.status; })
.catch((e) => { out.textContent = 'Canceled: ' + e.name; })
.finally(() => clearTimeout(timer));ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس جلب البيانات على مرحلتين عبر fetch()، وفحص نجاح الاستجابة عبر response.ok، وقراءة الجسم بـ res.json() وres.text()، وإرسال طلبات POST مع رؤوس الرسالة، وإلغاء الطلبات المتأخرة عبر AbortController وفهم سياسة CORS. الخطوة التالية: انتقل إلى درس «واجهة تحديد الموقع الجغرافي Geolocation API» لقراءة الإحداثيات باحترام كامل لخصوصية المستخدم.