Bagaimanakah anda mengendalikan rangkaian dan API dalam React Native?

Question

Accepted Answer

Aplikasi React Native kerap memanggil **API** — menggunakan **fetch** terbina dalam (atau **axios**), async/await, dan mengendalikan respons, ralat, serta state pemuatan. Rangkaian berfungsi seperti dalam JavaScript web, selalunya digabungkan dengan React Query untuk caching. ## Membuat permintaan dengan 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` (terbina dalam) membuat permintaan HTTP; `await response.json()` menghuraikan JSON; menyemak `response.ok` dan try/catch mengendalikan ralat. `axios` ialah alternatif popular (interceptors, API yang lebih baik). ## Menguruskan state pemuatan/ralat/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 } ``` Aplikasi mesti mengendalikan state **pemuatan, ralat, dan data** untuk UX yang baik (spinner semasa memuat, mesej ralat apabila gagal, data apabila berjaya). ## React Query (disyorkan untuk data pelayan) ```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) ``` ## Mengapa ia penting Memahami rangkaian dan API dalam React Native adalah penting kerana **kebanyakan aplikasi berkomunikasi dengan backend** — mengambil dan menghantar data ialah keperluan hampir universal, jadi ia merupakan pengetahuan praktikal yang mesti diketahui. Aplikasi sentiasa membuat panggilan API (memuatkan data, menghantar borang, pengesahan), dan rangkaian React Native berfungsi seperti JavaScript web (satu kelebihan untuk pembangun web). Memahami **membuat permintaan** (`fetch` terbina dalam atau `axios`, dengan async/await, menghuraikan JSON, dan menyemak kod status) dan **mengendalikan ralat** (try/catch, menyemak `response.ok`) ialah kemahiran teras, kerana panggilan rangkaian adalah asas dan biasa gagal. Secara kritikal, memahami cara **menguruskan state pemuatan, ralat, dan data** adalah penting untuk UX yang baik: memaparkan spinner pemuatan (ActivityIndicator) semasa mengambil, mesej ralat apabila gagal, dan data apabila berjaya — mengendalikan state ini dengan betul ialah apa yang menjadikan aplikasi terasa licin dan bukannya rosak (skrin kosong semasa memuat, atau ranap apabila ralat, ialah UX yang buruk). Memahami **React Query/TanStack Query** semakin berharga: ia mengendalikan pengambilan, **caching**, state pemuatan/ralat, pengambilan semula, dan penyegerakan secara automatik, mengurangkan boilerplate menguruskan setiap fetch secara manual dengan useState/useEffect secara mendadak — dan ialah **pendekatan yang disyorkan untuk data pelayan** dalam React Native moden, mencerminkan pengiktirafan bahawa data pelayan mendapat manfaat daripada pengendalian khusus (caching, penyegerakan). Memandangkan kebanyakan aplikasi React Native berkomunikasi dengan API (keperluan hampir universal) dan melakukannya dengan baik (fetch/axios, pengendalian ralat, dan terutamanya menguruskan state pemuatan/ralat/data untuk UX yang baik, idealnya dengan React Query untuk caching) adalah penting untuk aplikasi yang berfungsi dan licin, memahami rangkaian dan API dalam React Native adalah pengetahuan praktikal yang penting dan kerap digunakan — kemahiran asas yang diperlukan dalam hampir setiap aplikasi sebenar yang mengambil data, penting kepada pembinaan aplikasi yang memaparkan data backend dengan boleh dipercayai dan lancar, dengan React Query menjadi pendekatan moden yang disyorkan untuk menguruskan data pelayan.