Hvordan håndterer du nettverk og APIer i React Native?

Question

Accepted Answer

React Native-apper kaller ofte **APIer** — ved å bruke innebygd **fetch** (eller **axios**), async/await, og håndtering av svar, feil og lastetilstander. Nettverk fungerer som i web JavaScript, ofte kombinert med React Query for caching. ## Lage forespørsler med 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` (innebygd) gjør HTTP-forespørsler; `await response.json()` analyserer JSON; kontroll av `response.ok` og try/catch håndterer feil. `axios` er et populært alternativ (interceptors, bedre API). ## Administrere lastetilstand/feil/data-tilstander ```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 } ``` Apper må håndtere **lastetilstand, feil og data**-tilstander for god UX (spinner under lasting, feilmelding ved feil, data ved suksess). ## React Query (anbefalt for serverdata) ```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) ``` ## Hvorfor det betyr noe Å forstå nettverk og APIer i React Native er essensielt fordi **de fleste apper kommuniserer med backends** — henting og sending av data er et nesten universelt behov, så det er viktig praktisk kunnskap. Apper gjør konstant API-kall (lasting av data, innsending av skjemaer, autentisering), og React Native-nettverk fungerer som web JavaScript (en fordel for webutviklere). Å forstå **lage forespørsler** (innebygd `fetch` eller `axios`, med async/await, analyse av JSON, og kontroll av statuskoder) og **håndtere feil** (try/catch, kontroll av `response.ok`) er kjerneferdigheten, siden nettverkskall er grunnleggende og ofte feiler. Kritisk er det å forstå hvordan du **administrerer lastetilstand, feil og data-tilstander** som er essensielt for god UX: vise en lastespinner (ActivityIndicator) under henting, en feilmelding ved feil, og dataene ved suksess — håndtering av disse tilstandene på riktig måte er det som gjør at apper føles polerte i stedet for ødelagte (en blank skjerm under lasting, eller et krasj ved feil, er dårlig UX). Å forstå **React Query/TanStack Query** blir stadig mer verdifull: den håndterer henting, **caching**, lastetilstand/feil-tilstander, re-henting, og synkronisering automatisk, noe som dramatisk reduserer boilerplate-koden ved manuell håndtering av hver henting med useState/useEffect — og er **anbefalt tilnærming for serverdata** i moderne React Native, noe som reflekterer erkjennelsen av at serverdata fordeler seg av dedikert håndtering (caching, synkronisering). Siden de fleste React Native-apper kommuniserer med APIer (et nesten universelt behov) og å gjøre det godt (fetch/axios, feilhåndtering, og spesielt administrasjon av lastetilstand/feil/data-tilstander for god UX, ideelt sett med React Query for caching) er essensielt for funksjonsrike, polerte apper, er forståelse av nettverk og APIer i React Native essensielt, hyppig brukt praktisk kunnskap — en grunnleggende ferdighet som trengs i praktisk talt hver ekte app som henter data, sentral for å bygge apper som pålitelig og smooth viser backend-data, med React Query som anbefalt moderne tilnærming for administrasjon av serverdata.