Hur modellerar du async/laddningsläget?

Question

Accepted Answer

Asinkrona operationer (API-anrop) har flera möjliga resultat, så du måste modellera **mer än bara data** — du behöver representera lägg in stater för laddning, framgång och fel. Bra modellering förhindrar UI-buggar som att visa inaktuella data eller ingen återkoppling. ## Det naiva sättet och dess brister ```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. ``` Oberoende flaggor tillåter motsägelsefulla kombinationer (laddning *och* fel *och* data samtidigt) som borde vara omöjliga — en källa till förvirrande UI-buggar. ## Bättre: en status enum (en liten tillståndsmaskin) ```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 }); } } ``` Ett enda `status`-fält gör tillstånden **ömsesidigt uteslutande** — du kan inte vara både laddning och fel samtidigt. Rendering blir en ren switch: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Glöm inte ofta missade tillstånd ```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) ``` ## Det bästa sättet för serverdata: använd ett bibliotek ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Servertillståndsbibliotek tillhandahåller dessa tillstånd (plus caching, refetch, stale-while-revalidate) direkt — vanligtvis bättre än att implementera själv. ## Varför det är viktigt Korrekt modellering av asynkront tillstånd — som en enda status snarare än lösa booleaner — eliminerar en hel klass av UI-buggar (motsägelsefulla tillstånd, saknad återkoppling för laddning/fel/tomt) och gör renderingslogiken ren och uttömmande. Att känna igen det fullständiga uppsättningen av tillstånd (idle, laddning, framgång, fel, tomt, omladdning) leder till bättre användarupplevelse, och att veta att serverillståndsbibliotek hanterar allt detta är det som håller datahämtningskoden enkel och robust.