POST, PUT og DELETE med Axios
Send data til en API med Axios POST og PUT, håndtér svaret for at opdatere lokal state, og implementér en slettehandling, der fjerner et element både fra serveren og listen.
POST, PUT og DELETE med Axios er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
CRUD-handlinger med Axios
Ud over at hente data har de fleste apps brug for at oprette, opdatere og slette ressourcer på en server. Axios leverer metoderne axios.post, axios.put, axios.patch og axios.delete, som direkte svarer til HTTP-metoder. Hver metode returnerer et Promise, der løses til serverens svar.
POST: Oprettelse af en ny ressource
axios.post(url, data) sender en forespørgselsbrødtekst som JSON for at oprette en ny ressource. Det andet argument er objektet med forespørgselsbrødteksten — Axios serialiserer det automatisk til JSON og indstiller Content-Type: application/json-headeren. Serveren svarer typisk med den oprettede ressource, inklusive dens tildelte ID.
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;
};Tilføjelse af et nyt element til tilstanden efter POST
Efter en vellykket POST skal du tilføje det returnerede element til dit lokale tilstandsarray, så oprettelsen afspejles uden en fuld genindlæsning. Brug den funktionelle form af setState til sikkert at flette det nye element sammen med det eksisterende array. Det ID, serveren har tildelt, bruges som den entydige nøgle ved efterfølgende gengivelser.
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: Erstatning af en hel ressource
axios.put(url, data) erstatter en hel ressource med de angivne data. Inkludér ressourcens ID i URL'en, og send alle felter i brødteksten. PUT er idempotent — hvis du kalder den flere gange med de samme data, giver det samme resultat. Brug PUT, når du erstatter hele ressourcen, ikke kun opdaterer nogle få felter.
const updatePost = async (postId, updatedData) => {
const response = await axios.put(
'/posts/' + postId,
updatedData
);
return response.data;
};PATCH: Delvis opdatering
axios.patch(url, data) sender kun de ændrede felter i stedet for hele ressourcen. Det er mere effektivt end PUT, når du opdaterer et enkelt felt (f.eks. en brugers avatar eller en posts titel). Mange REST-API'er understøtter både PUT og PATCH — se API-dokumentationen for at finde ud af, hvilken der 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;
};Opdatering af tilstanden efter PUT/PATCH
Efter en vellykket opdatering skal du erstatte det gamle element i tilstandsarrayet med den version, serveren har returneret. Brug Array.map til at gennemløbe tilstanden og udskifte det matchende element. Det holder den lokale tilstand synkroniseret med serveren uden en fuld genindlæsning.
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: Fjernelse af en ressource
axios.delete(url) fjerner ressourcen på den angivne URL. De fleste API'er returnerer et 200- eller 204-svar (No Content) ved vellykket sletning. I modsætning til POST og PUT sender DELETE ikke en forespørgselsbrødtekst. Det tredje argument til axios.delete kan sende konfigurationsindstillinger som autorisationsheadere.
const deletePost = async (postId) => {
await axios.delete('/posts/' + postId);
console.log('Post deleted');
};Fjernelse af elementet fra tilstanden efter DELETE
Efter en vellykket DELETE filtrerer du elementet ud af dit lokale tilstandsarray med Array.filter. Brugerfladen opdateres med det samme uden en tur-retur for at hente hele listen igen. Hvis DELETE mislykkes, fanges fejlen, og elementet forbliver i tilstanden, så brugeren får vist en fejlmeddelelse.
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 opdateringer
Optimistiske opdateringer opdaterer den lokale tilstand med det samme, før serveren har bekræftet ændringen, så brugerfladen føles øjeblikkelig. Hvis anmodningen mislykkes, gendannes den oprindelige tilstand, og der vises en fejl. Dette mønster bruges blandt andet af Twtters like-knap og Gmails sletning — handlingen føles øjeblikkelig, selv over en langsom forbindelse.
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.');
}
};Upload af filer med FormData
Hvis du vil uploade et billede eller en fil via POST, skal du oprette et FormData-objekt, tilføje filen ved hjælp af React Natives URI-format og videregive den til axios.post. Angiv Content-Type-headeren til multipart/form-data, så serveren fortolker den korrekt som en filupload 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;
};Kædning af ændringer: Opret og naviger derefter
Efter en vellykket POST eller PUT vil du ofte navigere brugeren til detaljeskærmen for den netop oprettede ressource. Kæd navigationskaldet efter tilstandsopdateringen i succesforløbet i din try/catch. Giv den nye ressources id eller hele objektet som navigationsparametre.
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');
}
};Hurtigt tjek
Test din forståelse af POST-, PUT- og DELETE-anmodninger med Axios fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du, at axios.post sender en JSON-body for at oprette en ressource og returnerer det oprettede element fra serveren, at axios.put/patch erstatter eller opdaterer en ressource delvist — opdater tilstanden med Array.map efter succes, og at axios.delete fjerner en ressource — opdater tilstanden med Array.filter, og brug optimistiske opdateringer for en hurtig brugeroplevelse. Nu skal vi se på Redux Toolkit til håndtering af kompleks applikationstilstand.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “POST, PUT og DELETE med Axios” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “POST, PUT og DELETE med Axios”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “POST, PUT og DELETE med Axios”?
Send data til en API med Axios POST og PUT, håndtér svaret for at opdatere lokal state, og implementér en slettehandling, der fjerner et element både fra serveren og listen. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “POST, PUT og DELETE med Axios”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- useEffect-hooket og afhængighedsarrays
- GET-requests med Axios
- Håndtering af indlæsnings- og fejltilstande
- POST, PUT og DELETE med Axios