شرح صفوف ومحتوى الفقرة
قد ينقطع اتصال الشبكة فجأة أو يتأخر الخادم أو يصل رد غير صالح للتحليل؛ ولذلك يضمن تغليف عملية الجلب كاملة داخل بنية try / catch / finally اصطياد أي استثناء بأمان بدلاً من ترك وعود مرفوضة غير معالجة في المتصفح.
داخل كتلة catch نحدّث حالة الخطأ برسالة مفهومة ليبقى المكون متماسكاً، وداخل finally ننهي حالة الانتظار سواء نجح الطلب أم تعذر. يوضح الجدول التالي خلاصة القواعد الهندسية لجلب البيانات:
| مرحلة الجلب | النمط الخاطئ الشائع | المعيار الهندسي في React |
|---|---|---|
| موضع الاستدعاء | تشغيل fetch<code>() مباشرة أثناء التصيير | تشغيل fetch<code>() داخل useEffect<code>() بعد الرسم الأولي |
| صياغة الدالة غير المتزامنة | وضع async مباشرة على معامل useEffect | تعريف دالة async داخلية واستدعاؤها بوضوح |
| فحص حالة البروتوكول | افتراض رفض الوعد تلقائياً عند خطأ 404 | فحص response.ok صراحة قبل قراءة response.json<code>() |
| تحديث المعاملات | إهمال متغيرات التصفية من مصفوفة الاعتماديات | إدراج [category, query] مع ترميز encodeURIComponent<code>() |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس دورة جلب البيانات داخل مكونات React عبر تشغيل الطلبات في useEffect بدالة async داخلية، وفحص response.ok قبل تحليل JSON، وإعادة الجلب التلقائية عند تغير المعاملات، وتنسيق السجلات بمفاتيح مستقرة مع اصطياد أعطال الشبكة بأمان. الخطوة التالية: انتقل الآن إلى الدرس رقم 38 «إدارة حالات التحميل والخطأ والبيانات الفارغة» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.