كيف تقوم بنمذجة حالة التحميل والعمليات غير المتزامنة؟

Question

Accepted Answer

العمليات غير المتزامنة (استدعاءات API) لها نتائج محتملة متعددة، لذا يجب عليك نمذجة **أكثر من مجرد البيانات** — تحتاج إلى تمثيل حالات التحميل والنجاح والخطأ. نمذجة هذا بشكل جيد تمنع أخطاء واجهة المستخدم مثل عرض البيانات القديمة أو عدم تقديم تغذية راجعة. ## المنهج الساذج وعيوبه ```js // ❌ separate booleans — can represent impossible combinations const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // What does { loading: true, error: "x", data: [...] } even mean? An invalid state. ``` الأعلام المستقلة تسمح بتركيبات متناقضة (التحميل *و* الخطأ *و* البيانات في نفس الوقت) والتي يجب أن تكون مستحيلة — مصدر أخطاء واجهة المستخدم المربكة. ## أفضل: enum للحالة (آلة حالة صغيرة) ```js // ✅ a single `status` makes states mutually exclusive const [state, setState] = useState({ status: "idle", data: null, error: null }); // status is one of: 'idle' | 'loading' | 'success' | 'error' async function load() { setState({ status: "loading", data: null, error: null }); try { const data = await api.get(); setState({ status: "success", data, error: null }); } catch (e) { setState({ status: "error", data: null, error: e.message }); } } ``` حقل `status` واحد يجعل الحالات **متنافية بشكل متبادل** — لا يمكنك أن تكون في حالة التحميل والخطأ في نفس الوقت. يصبح العرض بمثابة تبديل نظيف: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## لا تنسَ الحالات التي يتم تفويتها غالباً ```text idle — hasn't started yet (vs loading) empty — succeeded but no results (show "No items" not a blank screen) refetching— has old data AND is loading new (show data + a subtle spinner) ``` ## الطريقة الأفضل لبيانات الخادم: استخدم مكتبة ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` مكتبات حالة الخادم توفر هذه الحالات (بالإضافة إلى التخزين المؤقت والإعادة والتحديث مع البقاء) من الصندوق — عادة أفضل من البناء اليدوي. ## لماذا يهم هذا نمذجة حالة العمليات غير المتزامنة بشكل صحيح — كحالة واحدة بدلاً من القيم المنطقية السائبة — تزيل فئة كاملة من أخطاء واجهة المستخدم (حالات متناقضة، تغذية راجعة تحميل/خطأ/فارغة مفقودة) وتجعل منطق العرض نظيفاً وشاملاً. الاعتراف بمجموعة الحالات الكاملة (خامل، يحمل، نجح، خطأ، فارغ، إعادة تحميل) يؤدي إلى تجربة مستخدم أفضل، والمعرفة بأن مكتبات حالة الخادم تتعامل مع كل هذا هو ما يحافظ على كود جلب البيانات بسيطاً وقوياً.