Three-State Fetching معالجة الطلب بثلاث حالات

آخر تحديث: 2026-11-03

Three-State Fetching معالجة الطلب بثلاث حالات

كل طلب بيانات له ثلاث حالات: loading أثناء التنفيذ، وsuccess عند وصول البيانات، وerror عند الفشل. يجب أن تُهيّئ الواجهة إطارًا لكل منها، وفقد أيٍّ منها يُنتج شاشة بيضاء أو انتظارًا أبديًا أو فشلًا صامتًا. هذا النموذج الذهني المشترك بين كود fetch المكتوب يدويًا وكل مكتبات الطلب، فتعلّمه مرة يفيد في كل مكان.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

const [state, setState] = useState({ status: 'loading', data: null, error: null })

useEffect(() => {
  fetch(url)
    .then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
    .then(data => setState({ status: 'success', data, error: null }))
    .catch(err => setState({ status: 'error', data: null, error: err }))
}, [url])

if (state.status === 'loading') return <p>Loading…</p>
if (state.status === 'error')   return <p>Error: {state.error.message}</p>
return <List data={state.data} />

⚙️ المعاملات

القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة قابلة للاستدعاء.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

يُظهر الطلب التلقائي الأول «جارٍ التحميل»؛ وعند النجاح يظهر عنوان todo؛ وعند فشل الشبكة أو الواجهة تحصل على رسالة الخطأ مع زر إعادة المحاولة — إطار لكل حالة من الثلاث.

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

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

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن