คุณจัดการ networking และ API ใน React Native อย่างไร?

Question

Accepted Answer

แอป React Native เรียกใช้ **API** บ่อยครั้ง — โดยใช้ **fetch** ที่มีมาในตัว (หรือ **axios**), async/await และจัดการ response, error และสถานะ loading การทำ networking ทำงานเหมือนใน web JavaScript และมักใช้ร่วมกับ React Query เพื่อการแคช ## การส่ง request ด้วย fetch ```jsx // fetch is built-in (like the web); use async/await async function getUsers() { try { const response = await fetch('https://api.example.com/users'); if (!response.ok) throw new Error('Request failed'); // check status const data = await response.json(); // parse JSON return data; } catch (error) { console.error(error); // handle errors throw error; } } ``` `fetch` (มีมาในตัว) ส่ง HTTP request; `await response.json()` แปลง JSON; การตรวจสอบ `response.ok` และ try/catch จัดการ error ส่วน `axios` เป็นทางเลือกที่นิยม (มี interceptor, API ที่ใช้ง่ายกว่า) ## การจัดการสถานะ loading/error/data ```jsx function Users() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { getUsers().then(setData).catch(setError).finally(() => setLoading(false)); }, []); if (loading) return ; // loading spinner if (error) return Error; // error UI return ; // show data } ``` แอปต้องจัดการสถานะ **loading, error และ data** เพื่อ UX ที่ดี (spinner ขณะ loading, ข้อความ error เมื่อล้มเหลว, ข้อมูลเมื่อสำเร็จ) ## React Query (แนะนำสำหรับ server data) ```text → React Query / TanStack Query handles fetching + CACHING + loading/error states + refetching + sync automatically → much less boilerplate than manual useState/useEffect → Recommended for managing server data (vs hand-rolling every fetch) ``` ## ทำไมจึงสำคัญ การเข้าใจ networking และ API ใน React Native เป็นสิ่งจำเป็น เพราะ **แอปส่วนใหญ่สื่อสารกับ backend** — การดึงและส่งข้อมูลเป็นความต้องการที่แทบเป็นสากล จึงเป็นความรู้เชิงปฏิบัติที่ต้องรู้ แอปเรียก API อยู่ตลอด (โหลดข้อมูล, ส่งฟอร์ม, การยืนยันตัวตน) และ networking ของ React Native ทำงานเหมือน web JavaScript (เป็นประโยชน์สำหรับนักพัฒนาเว็บ) การเข้าใจ **การส่ง request** (`fetch` ที่มีมาในตัว หรือ `axios` พร้อม async/await, การแปลง JSON และการตรวจสอบ status code) และ **การจัดการ error** (try/catch, การตรวจสอบ `response.ok`) เป็นทักษะหลัก เพราะการเรียก network เป็นพื้นฐานและมักล้มเหลวได้ สิ่งสำคัญยิ่งคือ การเข้าใจวิธี **จัดการสถานะ loading, error และ data** เป็นสิ่งจำเป็นต่อ UX ที่ดี: การแสดง loading spinner (ActivityIndicator) ขณะดึงข้อมูล, ข้อความ error เมื่อล้มเหลว และข้อมูลเมื่อสำเร็จ — การจัดการสถานะเหล่านี้อย่างถูกต้องคือสิ่งที่ทำให้แอปรู้สึกสมบูรณ์แทนที่จะรู้สึกเสีย (หน้าจอว่างขณะ loading หรือ crash เมื่อ error เป็น UX ที่แย่) การเข้าใจ **React Query/TanStack Query** มีคุณค่ามากขึ้นเรื่อย ๆ: มันจัดการการดึงข้อมูล, **การแคช**, สถานะ loading/error, การ refetch และการซิงค์โดยอัตโนมัติ ลดโค้ดซ้ำซ้อนของการจัดการทุก fetch ด้วย useState/useEffect ลงอย่างมาก — และเป็น **แนวทางที่แนะนำสำหรับ server data** ใน React Native สมัยใหม่ สะท้อนการตระหนักว่า server data ได้ประโยชน์จากการจัดการเฉพาะ (การแคช, การซิงค์) เนื่องจากแอป React Native ส่วนใหญ่สื่อสารกับ API (ความต้องการที่แทบเป็นสากล) และการทำให้ดี (fetch/axios, การจัดการ error และโดยเฉพาะการจัดการสถานะ loading/error/data เพื่อ UX ที่ดี ในอุดมคติใช้ React Query เพื่อการแคช) เป็นสิ่งจำเป็นต่อแอปที่ใช้งานได้และสมบูรณ์ ดังนั้นการเข้าใจ networking และ API ใน React Native จึงเป็นความรู้เชิงปฏิบัติที่จำเป็นและใช้บ่อย — ทักษะพื้นฐานที่ต้องใช้ในแทบทุกแอปจริงที่ดึงข้อมูล เป็นศูนย์กลางของการสร้างแอปที่แสดงข้อมูลจาก backend อย่างน่าเชื่อถือและราบรื่น โดยมี React Query เป็นแนวทางสมัยใหม่ที่แนะนำสำหรับการจัดการ server data