معالجة حالتي التحميل والخطأ
أضف متغيرات لحالتي التحميل والخطأ إلى مكوّنك، واعرض مؤشر تحميل أثناء الجلب، ورسالة خطأ ودية عند الفشل.
معالجة حالتي التحميل والخطأ درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
الحالات الثلاث للبيانات غير المتزامنة
تتضمن أي عملية بيانات غير متزامنة ثلاث حالات: التحميل، عندما يكون الطلب قيد التنفيذ؛ والنجاح، عند استلام البيانات؛ والخطأ، عند فشل الطلب. يجب أن تتعامل واجهتك مع الحالات الثلاث بشكل صريح.
واجهة التحميل
أثناء التحميل، اعرض مؤشر انتظار أو هيكلًا أو عنصرًا نائبًا. امنع إعادة إرسال النموذج بتعطيل الأزرار أثناء التحميل. يجب أن يعرف المستخدم دائمًا أن التطبيق قيد العمل.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}واجهة الخطأ
اعرض رسالة خطأ ودية عند فشل الطلب. أضف إجراءً لإعادة المحاولة حتى لا يعلق المستخدم. سجّل الخطأ الكامل للمطورين.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}آلية إعادة المحاولة
زِد عدّاد إعادة المحاولة في الحالة وأضفه إلى مصفوفة تبعيات التأثير. عند نقر المستخدم على إعادة المحاولة، تتغير قيمة العدّاد، مما يؤدي إلى تشغيل التأثير مرة أخرى.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>أفضل ممارسات حالة التحميل
1) اعرض حالة التحميل فورًا عند بدء الطلب. 2) اجعل حالة التحميل مقتضبة، ولا تعِد ضبطها إذا كانت البيانات المخزنة مؤقتًا متاحة. 3) في تقسيم الصفحات، ميّز بين التحميل الأولي وتحميل المزيد. 4) لا تعرض مؤشر انتظار خاطفًا لمدة تقل عن 100ms، بل أضف تأخيرًا أو أبقِ البيانات السابقة ظاهرة.
التحديثات المتفائلة
التحديثات المتفائلة: حدّث الواجهة فورًا قبل أن يؤكد الخادم العملية، ثم أعدها إلى حالتها السابقة إذا فشل الطلب. يمنح ذلك انطباعًا باستجابة فورية.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}حدود الأخطاء لأخطاء العرض
استخدم Error Boundaries، وهي مكوّنات أصناف تتضمن componentDidCatch، لالتقاط الأخطاء التي تُلقى أثناء العرض. فهي تعرض واجهة بديلة بدلًا من تعطل التطبيق بأكمله.
تعيين أخطاء HTTP
اربط رموز حالة HTTP برسائل سهلة الفهم للمستخدم. 401 ← أعد التوجيه إلى تسجيل الدخول. 403 ← اعرض رسالة الوصول مرفوض. 404 ← اعرض رسالة لم يتم العثور عليه. 429 ← اعرض رسالة طلبات كثيرة جدًا — يرجى الانتظار. 500+ ← اعرض رسالة خطأ في الخادم — حاول مرة أخرى.
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}استخدام useReducer لحالة الجلب المعقدة
عندما تتفاعل حالات التحميل والخطأ والبيانات معًا، مثل محو الخطأ عند إعادة التحميل، يكون استخدام reducer أوضح من استخدام عدة استدعاءات لـ useState.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — المستقبل
يتيح React Suspense مع أطر جلب البيانات، مثل React Query وRelay وNext.js، للمكوّنات أن تتوقف مؤقتًا أثناء انتظار البيانات. تعرض حدود Suspense الأصلية واجهة بديلة تلقائيًا. هذا هو الاتجاه الذي تتجه إليه React.
خطأ الشبكة مقابل خطأ الخادم
تُلقى أخطاء الشبكة، مثل انقطاع الاتصال أو CORS، داخل كتلة catch. أما أخطاء الخادم، مثل 4xx و5xx، فتُحل بشكل طبيعي، لذا يجب عليك التحقق من res.ok لاكتشافها. يجب أن تتعامل معالجة الأخطاء مع الفئتين.
تحقق سريع
ما المقصود بالتحديث المتفائل؟
مراجعة: حالات التحميل والخطأ
تعامل دائمًا مع حالات التحميل والنجاح والخطأ. اعرض واجهة تحميل مفيدة. اربط أخطاء HTTP برسائل سهلة الفهم للمستخدم. نفّذ آليات لإعادة المحاولة. استخدم التحديثات المتفائلة لتوفير استجابة فورية مُدركة. استخدم useReducer لحالة الجلب المنسقة. ستعمل Suspense في النهاية على تبسيط هذا النمط بدرجة أكبر.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «معالجة حالتي التحميل والخطأ» مجاني؟
نعم — نص درس «معالجة حالتي التحميل والخطأ» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «معالجة حالتي التحميل والخطأ»؟
أضف متغيرات لحالتي التحميل والخطأ إلى مكوّنك، واعرض مؤشر تحميل أثناء الجلب، ورسالة خطأ ودية عند الفشل. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «معالجة حالتي التحميل والخطأ»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات useEffect: الاعتماديات والتنظيف
- جلب البيانات عند التحميل
- معالجة حالتي التحميل والخطأ
- AbortController للتنظيف