როგორ მოდელირებთ ასინქრონული/ჩატვირთვის მდგომარეობას?

Question

Accepted Answer

ასინქრონული ოპერაციები (API მოთხოვნები) რამდენიმე შესაძლო შედეგის მქონე არიან, ამიტომ თქვენ უნდა მოდელირება გააკეთოთ **მხოლოდ მონაცემებზე მეტი** — თქვენ უნდა წარმოადგინოთ ჩატვირთვის, წარმატების და შეცდომის მდგომარეობები. ამის კარგი მოდელირება ხელს შეუწყობს UI შეცდომების თავიდან აცილებას, როგორიცაა მოძველებული მონაცემების ან უკუკავშირის არარსებობის ჩვენება. ## გულუბრელი მიდგომა და მისი ნაკლი ```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. ``` დამოუკიდებელი ფლაგები საშუნებას იძლევა წინააღმდეგობრივი კომბინაციების (ჩატვირთვა *და* შეცდომა *და* მონაცემები ერთდროულად), რომელიც არ უნდა იყოს შესაძლებელი — დამაბნეველი UI შეცდომების წყარო. ## უკეთ: სტატუსის 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` ველი ხდის სახელმწიფოებს **ურთიერთექსკლუზიური** — თქვენ არ შეგიძლიათ ერთდროულად იყოთ ჩატვირთვის და შეცდომის მდგომარეობაში. რენდერირება ხდება სუფთა switch: ```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 }); ``` სერვერის მდგომარეობის ბიბლიოთეკები აღვათ ამ მდგომარეობებს (პლუს კეშირება, refetch, stale-while-revalidate) დაუყოვნებლივ — ჩვეულებრივ უკეთ ვიდრე ხელით დამზადება. ## რატომ არის მნიშვნელოვანი ასინქრონული მდგომარეობის სწორი მოდელირება — როგორც ერთი სტატუსი და არა ღია ლოგიკური მნიშვნელობები — აღმოფხვრის UI შეცდომების მთელ კატეგორიას (წინააღმდეგობრივი მდგომარეობები, ჩატვირთვის/შეცდომის/ცარიელი უკუკავშირის გამოტოვება) და აკეთებს რენდერირების ლოგიკას სუფთა და კომპლექსურს. მდგომარეობების სრული ნაკრების (idle, loading, success, error, empty, refetching) ამოცნობა უმჯობესი UX-მდე მივყავართ, და იმის ცოდნა, რომ სერვერის მდგომარეობის ბიბლიოთეკები ამას სამართავს, არის ის, რაც მონაცემების ფეტჩის კოდს მარტივი და მკაცრი ინახავს.