POST, PUT og DELETE med Axios
Send data til et API med Axios POST og PUT, håndter svaret for å oppdatere lokal tilstand, og implementer en slettehandling som fjerner et element både fra serveren og listen.
POST, PUT og DELETE med Axios er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
CRUD-operasjoner med Axios
I tillegg til å hente data trenger de fleste apper å opprette, oppdatere og slette ressurser på en server. Axios tilbyr metodene axios.post, axios.put, axios.patch og axios.delete, som svarer direkte til HTTP-verbene. Hver metode returnerer et Promise som løses til serverens respons.
POST: Opprette en ny ressurs
axios.post(url, data) sender en request body som JSON for å opprette en ny ressurs. Det andre argumentet er objektet som utgjør request body – Axios serialiserer det automatisk til JSON og setter headeren Content-Type: application/json. Serveren svarer vanligvis med den opprettede ressursen, inkludert den tildelte ID-en.
const createPost = async (title, body) => {
const response = await axios.post(
'https://jsonplaceholder.typicode.com/posts',
{ title, body, userId: 1 }
);
console.log('Created:', response.data);
// { id: 101, title: '...', body: '...', userId: 1 }
return response.data;
};Legge til et nytt element i state etter POST
Etter en vellykket POST legger De det returnerte elementet til i den lokale state-matrisen, slik at opprettelsen gjenspeiles uten en full ny datahenting. Bruk den funksjonelle formen av setState for å slå det nye elementet trygt sammen med den eksisterende matrisen. ID-en som serveren har tildelt, brukes som unik nøkkel ved senere rendringer.
const handleCreate = async (formData) => {
try {
const response = await axios.post('/posts', formData);
const newPost = response.data;
setPosts((prev) => [newPost, ...prev]);
} catch (err) {
setError('Failed to create post');
}
};PUT: Erstatte en hel ressurs
axios.put(url, data) erstatter en hel ressurs med dataene som oppgis. Ta med ressursens ID i URL-en, og send alle feltene i body-en. PUT er idempotent – flere kall med de samme dataene gir samme resultat. Bruk PUT når De erstatter hele ressursen, ikke bare oppdaterer noen få felt.
const updatePost = async (postId, updatedData) => {
const response = await axios.put(
'/posts/' + postId,
updatedData
);
return response.data;
};PATCH: Delvis oppdatering
axios.patch(url, data) sender bare feltene som er endret, i stedet for hele ressursen. Dette er mer effektivt enn PUT når De oppdaterer ett enkelt felt, for eksempel en brukers avatar eller tittelen på et innlegg. Mange REST-API-er støtter både PUT og PATCH – se i API-dokumentasjonen for å finne ut hvilken metode som forventes.
// Only update the title, leave other fields untouched
const patchPostTitle = async (postId, newTitle) => {
const response = await axios.patch(
'/posts/' + postId,
{ title: newTitle }
);
return response.data;
};Oppdatere state etter PUT/PATCH
Etter en vellykket oppdatering erstatter De det gamle elementet i state-matrisen med versjonen som serveren returnerte. Bruk Array.map til å gå gjennom state og bytte ut elementet som samsvarer. Da holdes den lokale state-en synkronisert med serveren uten en full ny datahenting.
const handleUpdate = async (postId, updatedData) => {
try {
const response = await axios.put('/posts/' + postId, updatedData);
const updatedPost = response.data;
setPosts((prev) =>
prev.map((p) => (p.id === postId ? updatedPost : p))
);
} catch (err) {
setError('Failed to update post');
}
};DELETE: Fjerne en ressurs
axios.delete(url) fjerner ressursen på den angitte URL-en. De fleste API-er returnerer en 200- eller 204-respons (No Content) når slettingen lykkes. I motsetning til POST og PUT sender DELETE ingen request body. Det tredje argumentet til axios.delete kan brukes til å sende konfigurasjonsalternativer som autorisasjonsheadere.
const deletePost = async (postId) => {
await axios.delete('/posts/' + postId);
console.log('Post deleted');
};Fjerne elementet fra state etter DELETE
Etter en vellykket DELETE filtrerer De elementet ut av den lokale tilstandsarrayen med Array.filter. Brukergrensesnittet oppdateres umiddelbart uten en ny forespørsel for å hente hele listen på nytt. Hvis DELETE mislykkes, fanges feilen opp, og elementet forblir i tilstanden – samtidig som brukeren får se en feilmelding.
const handleDelete = async (postId) => {
try {
await axios.delete('/posts/' + postId);
setPosts((prev) => prev.filter((p) => p.id !== postId));
} catch (err) {
setError('Failed to delete post');
}
};Optimistiske oppdateringer
Optimistiske oppdateringer oppdaterer den lokale tilstanden umiddelbart (før serveren har bekreftet handlingen), slik at brukergrensesnittet føles raskt. Hvis forespørselen mislykkes, tilbakestilles den opprinnelige tilstanden, og en feil vises. Dette mønsteret brukes av like-knappen i Twtter og slettefunksjonen i Gmail – handlingen føles umiddelbar selv med en treg tilkobling.
const handleDelete = async (postId) => {
const originalPosts = posts;
// Update immediately
setPosts((prev) => prev.filter((p) => p.id !== postId));
try {
await axios.delete('/posts/' + postId);
} catch (err) {
// Revert on failure
setPosts(originalPosts);
setError('Delete failed. Please try again.');
}
};Laste opp filer med FormData
For å laste opp et bilde eller en fil via POST oppretter De et FormData-objekt, legger til filen med React Native-URI-formatet og sender det til axios.post. Angi Content-Type-headeren til multipart/form-data, slik at serveren tolker innholdet riktig som en filopplasting i stedet for JSON.
const uploadAvatar = async (imageUri) => {
const formData = new FormData();
formData.append('avatar', {
uri: imageUri,
name: 'avatar.jpg',
type: 'image/jpeg',
});
const response = await axios.post('/user/avatar', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
return response.data.avatarUrl;
};Kjede mutasjoner: Opprett og naviger
Etter en vellykket POST eller PUT vil De ofte navigere brukeren til detaljskjermen for den nyopprettede ressursen. Kall navigeringen etter tilstandsoppdateringen i suksessforløpet i try/catch-blokken. Send den nye ressursens ID eller hele objektet som navigasjonsparametere.
const handleCreatePost = async (formData) => {
try {
const response = await axios.post('/posts', formData);
const newPost = response.data;
setPosts((prev) => [newPost, ...prev]);
navigation.navigate('PostDetail', { postId: newPost.id });
} catch (err) {
setError('Failed to create post');
}
};Hurtigsjekk
Test forståelsen Deres av POST-, PUT- og DELETE-forespørsler med Axios fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at axios.post sender en JSON-body for å opprette en ressurs og returnerer det opprettede elementet fra serveren, at axios.put/patch erstatter eller oppdaterer en ressurs delvis – oppdater tilstanden med Array.map etter en vellykket forespørsel, og at axios.delete fjerner en ressurs – oppdater tilstanden med Array.filter og bruk optimistiske oppdateringer for en rask brukeropplevelse. Deretter skal vi se på Redux Toolkit for håndtering av kompleks applikasjonstilstand.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «POST, PUT og DELETE med Axios» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «POST, PUT og DELETE med Axios», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «POST, PUT og DELETE med Axios»?
Send data til et API med Axios POST og PUT, håndter svaret for å oppdatere lokal tilstand, og implementer en slettehandling som fjerner et element både fra serveren og listen. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «POST, PUT og DELETE med Axios»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- useEffect-hooken og avhengighetstabeller
- Gjøre GET-forespørsler med Axios
- Håndtere laste- og feiltilstander
- POST, PUT og DELETE med Axios