useFetch Pattern Hook الاستخدام useFetch

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

useFetch Pattern Hook الاستخدام useFetch

اسحب منطق الطلب الثلاثي الحالات إلى Hook مخصّص useFetch(url): يستدعي المكوّن سطرًا واحدًا ويحصل على { data, loading, error }، فلا يتبعثر حالة الطلب في الكود. هذه الحالة الكلاسيكية لإعادة استخدام المنطق، ودرجة السلّم إلى TanStack Query. وتشترك كل المكوّنات في سلوك موثوق واحد، ويبقى التنظيف في مكان واحد لا يُنسخ.

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

📝 الصيغة

function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null })
  useEffect(() => {
    const ctrl = new AbortController()      // cancel the old request when url changes or on unmount
    setState({ data: null, loading: true, error: null })
    fetch(url, { signal: ctrl.signal })
      .then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
      .then(data => setState({ data, loading: false, error: null }))
      .catch(err => err.name !== 'AbortError' &&
        setState({ data: null, loading: false, error: err }))
    return () => ctrl.abort()               // cleanup: stops a stale response from overwriting fresh data
  }, [url])
  return state
}

⚙️ المعاملات

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

▶ مثال

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

الناتج：

النقر على «التبديل إلى #2» يُطلق طلبًا جديدًا ويعرض حالة التحميل لحظة ثم يرسم todo المطابق — يكتب المكوّن سطر useFetch(url) واحد بينما يُعاد استخدام منطق الحالات الثلاث كاملًا.

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

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

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

📚 دروس ذات صلة

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

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

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

من نحن