Kaip modeliuojate asinchroninę/įkėlimo būseną?

Question

Accepted Answer

Asinchroninės operacijos (API iškvietimai) turi kelis galimus rezultatus, todėl turite modeliuoti **daugiau nei tik duomenis** — turite nurodyti įkėlimo, sėkmės ir klaidos būsenas. Tinkamas šio modeliavimas išvengia UI klaidų, pavyzdžiui, perimtų duomenų ar jokios grįžtamosios informacijos rodymo. ## Naivus metodas ir jo trūkumai ```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. ``` Nepriklausomi žymekliai leidžia prieštaringus derinius (įkėlimas *ir* klaida *ir* duomenys vienu metu), kurie turėtų būti neįmanomi — painiaus UI klaidų šaltinis. ## Geriau: status enum (maža būsenos mašina) ```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 }); } } ``` Vienas `status` laukas daro būsenas **tarpusavyje nesuderinamas** — negalite būti ir įkeliant, ir klaidoje. Atvaizdavimas tampa švariu switch: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Nepamirškite dažnai praleistų būsenų ```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) ``` ## Geriausias serverio duomenų metodas: naudokite biblioteką ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Serverio būsenos bibliotekos teikia šias būsenas (plius talpinimas, refetch, stale-while-revalidate) iš karto — paprastai geriau nei rašyti savo. ## Kodėl tai svarbu Tinkamas asinchroninės būsenos modeliavimas — kaip viena būsena, o ne atsiskiri loginiai kintamieji — pašalina visą UI klaidų klasę (prieštaringa būsena, trūkstama įkėlimo/klaidos/tuščios grįžtamosios informacijos) ir daro atvaizdavimo logiką švaria ir išsamia. Pažinę visą būsenų rinkinį (idle, loading, success, error, empty, refetching), gausite geresnę vartotojo patirtį, o žinodami, kad serverio būsenos bibliotekos visa tai tvarko, išlaikysite duomenų gautos kodo paprastumą ir patikimumą.