Göra GET-begäranden med Axios
Installera Axios, gör en GET-begäran till ett offentligt API i useEffect, lagra svaret i tillståndet och rendera den hämtade datan i en FlatList.
Göra GET-begäranden med Axios är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Varför Axios i stället för Fetch?
fetch är inbyggt i React Native men kräver mer standardkod: du måste anropa .json() manuellt, kontrollera response.ok för HTTP-fel och hantera timeouts. Axios är ett HTTP-klientbibliotek som automatiskt tolkar JSON-svar, kastar fel för HTTP-statuskoder som anger fel, har inbyggt stöd för timeouts och erbjuder ett smidigt interceptor-API för globala headers och felhantering.
Installera Axios
Lägg till Axios i projektet med npm eller yarn. Det har inga native-beroenden, så inga ytterligare länkningssteg krävs för vare sig Expo- eller bare React Native-projekt.
npm install axios
# or
yarn add axiosDin första GET-förfrågan
Anropa axios.get(url) för att göra en GET-förfrågan. Metoden returnerar ett Promise som löses till ett svarsobjekt. Svarskroppen har redan tolkats som JSON och finns i response.data. Du behöver inte anropa .json() som du skulle göra med fetch.
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
console.log(response.data); // parsed JSON array
})
.catch((error) => {
console.error(error.message);
});Axios GET inuti useEffect
Kombinera Axios med useEffect för att hämta data när komponenten monteras. Lagra svarsdata i state med useState. Hantera fel och visa en laddningsindikator medan förfrågan behandlas. Den tomma beroendearrayen ser till att hämtningen bara sker en gång vid montering.
function PostsScreen() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => setPosts(res.data))
.catch((err) => console.error(err))
.finally(() => setLoading(false));
}, []);
if (loading) return <ActivityIndicator />;
return <FlatList data={posts} keyExtractor={(p) => String(p.id)} renderItem={({ item }) => <Text>{item.title}</Text>} />;
}Async/await med Axios
Axios fungerar naturligt med async/await. Definiera en async-funktion inuti useEffect-callbacken, anropa den direkt och omslut Axios-anropet med ett try/catch-block. Gör inte själva useEffect-callbacken async – definiera i stället den asynkrona funktionen inuti callbacken och anropa den.
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await axios.get('/posts');
setPosts(response.data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchPosts();
}, []);Skapa en Axios-instans
Skapa en delad Axios-instans med en baseURL och standardheaders. Varje förfrågan som görs med den här instansen använder automatiskt dessa standardvärden. Då slipper du upprepa hela URL:en i varje komponent, och det blir enkelt att uppdatera bas-URL:en eller lägga till en authorization-header på ett enda ställe.
// api/client.js
import axios from 'axios';
const client = axios.create({
baseURL: 'https://api.myapp.com/v1',
timeout: 10000,
headers: { 'Content-Type': 'application/json' },
});
export default client;
// Usage: just the path
client.get('/posts') // → GET https://api.myapp.com/v1/postsSkicka frågeparametrar
Skicka parametrar i frågesträngen via alternativet params i Axios-konfigurationsobjektet. Axios serialiserar params-objektet och lägger automatiskt till det i URL:en. Detta är renare än att bygga frågesträngar manuellt och URL-koda värden.
// Request: GET /posts?userId=1&_limit=5
const response = await axios.get('/posts', {
params: {
userId: 1,
_limit: 5,
},
});
console.log(response.data); // array of up to 5 posts by userId 1Lägga till authorization-headers
Koppla en bearer-token till förfrågningar antingen globalt via en standardinställning i en Axios-instans eller per förfrågan via konfigurationsobjektet. Använd request-interceptors i Axios för att automatiskt koppla en token som lagras i AsyncStorage eller en auth-kontext, utan att ändra varje enskild förfrågan.
// Per-request
axios.get('/user/profile', {
headers: { Authorization: 'Bearer ' + token },
});
// Global via interceptor
client.interceptors.request.use((config) => {
config.headers.Authorization = 'Bearer ' + getToken();
return config;
});Läsa svarsstrukturen
Alla Axios-svarsobjekt har samma struktur: data för den tolkade svarskroppen, status för HTTP-statuskoden, statusText och headers. Till skillnad från fetch kastar Axios automatiskt ett fel för statuskoderna 4xx och 5xx, så .catch eller try/catch hanterar både nätverksfel och HTTP-fel.
const response = await axios.get('/posts/1');
console.log(response.data); // { id: 1, title: '...' }
console.log(response.status); // 200
console.log(response.headers); // { 'content-type': 'application/json' }Avbryta Axios-förfrågningar
För att avbryta en Axios-förfrågan i rensningsfunktionen för useEffect skickar du med en signal från AbortController (Axios har inbyggt stöd för detta från och med v0.22). När komponenten avmonteras anropar du controller.abort() för att avbryta en pågående förfrågan och förhindra state-uppdateringar på avmonterade komponenter.
useEffect(() => {
const controller = new AbortController();
axios.get('/posts', { signal: controller.signal })
.then((res) => setPosts(res.data))
.catch((err) => {
if (!axios.isCancel(err)) setError(err.message);
});
return () => controller.abort();
}, []);Renderera hämtade data i FlatList
När data har lagrats i state skickar du den direkt till FlatLists data-prop. Eftersom state-uppdateringen utlöser en ny renderering visar FlatList automatiskt den nya datan. Detta enkelriktade dataflöde – hämta → state → renderera – är det grundläggande React-mönstret för att visa data.
return (
<FlatList
data={posts}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<View style={styles.row}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.body} numberOfLines={2}>{item.body}</Text>
</View>
)}
/>
);Snabbkontroll
Testa dina kunskaper om att göra GET-förfrågningar med Axios från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har du lärt dig att: axios.get returnerar ett Promise som löses till response.data som tolkad JSON, skapa en Axios-instans med en baseURL och standardheaders för återanvändning i flera komponenter och skicka med en AbortController-signal för att avbryta pågående förfrågningar i useEffect-rensningen. Härnäst hanterar vi laddnings- och feltillstånd för en bättre användarupplevelse.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Göra GET-begäranden med Axios” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Göra GET-begäranden med Axios”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Göra GET-begäranden med Axios”?
Installera Axios, gör en GET-begäran till ett offentligt API i useEffect, lagra svaret i tillståndet och rendera den hämtade datan i en FlatList. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Göra GET-begäranden med Axios”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- useEffect-hooken och beroendearrayer
- Göra GET-begäranden med Axios
- Hantera laddnings- och feltillstånd
- POST, PUT och DELETE med Axios