Hogyan kezeled a hálózatkezelést és az API-kat a React Native-ban?

Question

Accepted Answer

A React Native alkalmazások gyakran hívnak meg **API-kat** — a beépített **fetch** (vagy **axios**) használatával, async/await-tal, valamint a válaszok, hibák és betöltési állapotok kezelésével. A hálózatkezelés a webes JavaScripthez hasonlóan működik, gyakran a React Query segítségével kombinálva a gyorsítótárazáshoz. ## Kérések készítése fetch-vel ```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; } } ``` A `fetch` (beépített) HTTP-kéréseket küld; az `await response.json()` JSON-t elemez; a `response.ok` ellenőrzése és a try/catch kezelik a hibákat. Az `axios` népszerű alternatíva (interceptorok, szebb API). ## Betöltési/hiba/adat állapotok kezelése ```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 } ``` Az alkalmazásoknak kezelniük kell a **betöltési, hiba és adat** állapotokat a jó felhasználói élmény érdekében (spinner betöltés közben, hibaüzenet hiba esetén, adat siker esetén). ## React Query (ajánlott szerveradatokhoz) ```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) ``` ## Miért számít A hálózatkezelés és API-k megértése a React Native-ban lényeges, mert **a legtöbb alkalmazás kommunikál háttérszolgáltatásokkal** — az adatok lekérése és küldése szinte univerzális szükséglet, így ez gyakorlati, kötelező ismeret. Az alkalmazások állandóan készítenek API-hívásokat (adatok betöltése, űrlapok beküldése, hitelesítés), és a React Native hálózatkezelése a webes JavaScripthez hasonlóan működik (előny a webfejlesztők számára). A **kérések készítésének** megértése (a beépített `fetch` vagy `axios`, async/await-tal, JSON-elemzéssel és állapot-kódok ellenőrzésével) és a **hibakezelésnek** (try/catch, `response.ok` ellenőrzése) az alapvető készség, mivel a hálózati hívások alapvetőek és gyakran meghiúsulnak. Kritikus fontosságú, hogy megértsd, hogyan kell **kezelni a betöltési, hiba és adat állapotokat** a jó felhasználói élmény érdekében: betöltés közben egy betöltési spinner (ActivityIndicator) megjelenítése, hiba esetén egy hibaüzenet, és siker esetén az adat — ezeknek az állapotoknak a megfelelő kezelése az, ami polírozott alkalmazásoknak adja a hatást egy helyett, amelyek töröttek (üres képernyő betöltés közben, vagy összeomlás hiba esetén, rossz felhasználói élmény). A **React Query/TanStack Query** megértése egyre értékesebb: kezeli a lekérést, **gyorsítótárazást**, betöltési/hiba állapotokat, újralekérést és szinkronizálást automatikusan, dramatikusan csökkentve a minden fetch manuális kezelésének boilerplate-jét a useState/useEffect-vel — és ez az **ajánlott megközelítés szerveradatokhoz** a modern React Native-ban, amely tükrözi azt az ismeretet, hogy a szerveradatok dedikált kezelésből profitálnak (gyorsítótárazás, szinkronizálás). Mivel a legtöbb React Native alkalmazás API-kkal kommunikál (szinte univerzális szükséglet), és ezt jól tenni (fetch/axios, hibakezelés, és különösen a betöltési/hiba/adat állapotok kezelése a jó felhasználói élményhez, ideális esetben React Query-vel a gyorsítótárazáshoz) lényeges a funkcionális, polírozott alkalmazásokhoz, a React Native-ban a hálózatkezelés és API-k megértése lényeges, gyakran alkalmazott gyakorlati ismeret — egy alapvető készség, amely szinte minden valós alkalmazásban szükséges, amely adatokat kér le, központi a szervezet felépítésében, amely megbízhatóan és zökkenőmentesen jeleníti meg a háttéradatokat, a React Query pedig az ajánlott modern megközelítés a szerveradatok kezeléséhez.