คุณจำลองสถานะ async/loading ได้อย่างไร

Question

Accepted Answer

การดำเนินการแบบอะซิงโครนัส (API calls) มีผลลัพธ์ที่เป็นไปได้มากมาย ดังนั้นคุณต้องจำลอง **มากกว่าเพียงข้อมูล** — คุณต้องแสดงสถานะการโหลด สำเร็จ และข้อผิดพลาด การจำลองที่ดีช่วยป้องกัน UI bugs เช่น การแสดงข้อมูลเก่าหรือไม่มีการตอบกลับ ## วิธีแบบ naive และข้อบกพร่องของมัน ```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. ``` ธงที่เป็นอิสระอนุญาตให้มีชุดค่าผสมที่ขัดแย้ง (loading *และ* error *และ* data พร้อมกัน) ซึ่งควรจะเป็นไปไม่ได้ — แหล่งที่มาของ UI bugs ที่สับสน ## ดีกว่า: status enum (state machine ขนาดเล็ก) ```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` เดียวทำให้สถานะ **แยกออกจากกันเอง** — คุณไม่สามารถอยู่ในสถานะ loading และ error ได้พร้อมกัน การเรนเดอร์จะเป็น 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) ``` ## วิธีที่ดีที่สุดสำหรับข้อมูล server: ใช้ library ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Server-state libraries จัดเตรียมสถานะเหล่านี้ (บวกกับการ caching, refetch, stale-while-revalidate) ออกมาจากกล่อง — โดยปกติจะดีกว่าการเขียนเอง ## ทำไมจึงสำคัญ การจำลองสถานะ async ที่ถูกต้อง — เป็นสถานะเดียวแทนที่จะเป็น boolean หลวม — ช่วยขจัด UI bugs ทั้งชั้น (สถานะที่ขัดแย้ง การขาดข้อมูลการตอบกลับการโหลด/ข้อผิดพลาด/ว่าง) และทำให้ตรรกะการเรนเดอร์สะอาดและครบถ้วน การรู้จักชุดสถานะที่สมบูรณ์ (idle, loading, success, error, empty, refetching) นำไปสู่ UX ที่ดีขึ้น และการรู้ว่า server-state libraries จัดการสิ่งนี้ทั้งหมดคือสิ่งที่ทำให้โค้ดการดึงข้อมูลง่ายและมั่นคง