React Native Academy · Oppitunti

POST, PUT ja DELETE Axiosilla

Oppitunti 4/413 vaihetta

POST, PUT ja DELETE Axiosilla on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

CRUD-toiminnot Axiosilla

Tietojen hakemisen lisäksi useimpien sovellusten täytyy luoda, päivittää ja poistaa resursseja palvelimelta. Axios tarjoaa axios.post-, axios.put-, axios.patch- ja axios.delete-metodit, jotka vastaavat suoraan HTTP-verbejä. Jokainen metodi palauttaa Promisen, joka ratkaistaan palvelimen vastaukseksi.

POST: uuden resurssin luominen

axios.post(url, data) lähettää JSON-muotoisen pyynnön rungon uuden resurssin luomiseksi. Toinen argumentti on pyynnön runko-objekti. Axios muuntaa sen automaattisesti JSON-muotoon ja asettaa Content-Type: application/json -otsakkeen. Palvelin palauttaa yleensä luodun resurssin, joka sisältää sille määritetyn tunnisteen.

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;
};

Uuden kohteen lisääminen tilaan POST-pyynnön jälkeen

Lisää onnistuneen POST-pyynnön jälkeen palautettu kohde paikalliseen tilataulukkoon, jotta luominen näkyy ilman tietojen hakemista uudelleen. Käytä setState-funktionaalista muotoa yhdistääksesi uuden kohteen turvallisesti olemassa olevaan taulukkoon. Palvelimen määrittämää tunnistetta käytetään yksilöllisenä avaimena seuraavissa renderöinneissä.

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: koko resurssin korvaaminen

axios.put(url, data) korvaa koko resurssin annetuilla tiedoilla. Sisällytä resurssin tunniste URL-osoitteeseen ja lähetä kaikki kentät rungossa. PUT on idempotentti: saman datan lähettäminen useita kertoja tuottaa saman tuloksen. Käytä PUT-menetelmää, kun korvaat koko resurssin etkä vain päivitä muutamaa kenttää.

const updatePost = async (postId, updatedData) => {
  const response = await axios.put(
    '/posts/' + postId,
    updatedData
  );
  return response.data;
};

PATCH: osittainen päivitys

axios.patch(url, data) lähettää vain muuttuneet kentät koko resurssin sijaan. Tämä on PUT-menetelmää tehokkaampaa, kun päivität vain yhtä kenttää, kuten käyttäjän avataria tai julkaisun otsikkoa. Monet REST-rajapinnat tukevat sekä PUT- että PATCH-menetelmää, joten tarkista rajapinnan dokumentaatiosta, kumpaa odotetaan.

// 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;
};

Tilan päivittäminen PUT/PATCH-pyynnön jälkeen

Korvaa onnistuneen päivityksen jälkeen tilataulukon vanha kohde palvelimen palauttamalla versiolla. Käytä Array.map-metodia tilan läpikäyntiin ja vastaavan kohteen korvaamiseen. Näin paikallinen tila pysyy synkronoituna palvelimen kanssa ilman tietojen hakemista uudelleen.

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: resurssin poistaminen

axios.delete(url) poistaa annetussa URL-osoitteessa olevan resurssin. Useimmat rajapinnat palauttavat onnistuneen poiston jälkeen 200- tai 204-vastauksen (No Content). Toisin kuin POST ja PUT, DELETE ei lähetä pyynnön runkoa. axios.deleten kolmannella argumentilla voidaan välittää määritysasetuksia, kuten valtuutusotsakkeita.

const deletePost = async (postId) => {
  await axios.delete('/posts/' + postId);
  console.log('Post deleted');
};

Kohteen poistaminen tilasta DELETE-pyynnön jälkeen

Onnistuneen DELETE-pyynnön jälkeen suodattakaa kohde pois paikallisesta tila-taulukosta käyttämällä Array.filter-menetelmää. Käyttöliittymä päivittyy heti ilman uutta pyyntöä koko luettelon hakemiseksi. Jos DELETE-pyyntö epäonnistuu, virhe siepataan ja kohde säilyy tilassa – käyttäjälle näytetään virheilmoitus.

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');
  }
};

Optimistiset päivitykset

Optimistiset päivitykset päivittävät paikallisen tilan heti (ennen palvelimen vahvistusta), jotta käyttöliittymä tuntuisi välittömältä. Jos pyyntö epäonnistuu, palauttakaa alkuperäinen tila ja näyttäkää virheilmoitus. Tätä mallia käyttävät Twtterin tykkäyspainike ja Gmailin poistotoiminto – toiminto tuntuu välittömältä myös hitaalla yhteydellä.

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.');
  }
};

Tiedostojen lataaminen FormData-objektilla

Ladataksenne kuvan tai tiedoston POST-pyynnöllä luokaa FormData-objekti, liittäkää tiedosto siihen React Nativen URI-muodossa ja välittäkää se axios.post-kutsulle. Asettakaa Content-Type-otsakkeen arvoksi multipart/form-data, jotta palvelin käsittelee sisällön oikein tiedoston latauksena eikä JSON-muodossa.

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;
};

Mutaatioiden ketjuttaminen: luonti ja siirtyminen

Onnistuneen POST- tai PUT-pyynnön jälkeen käyttäjä halutaan usein siirtää juuri luodun resurssin tietonäkymään. Ketjuttakaa navigointikutsu tilan päivityksen jälkeen try/catch-rakenteen onnistumispolussa. Välittäkää navigointiparametreina uuden resurssin tunnus tai koko objekti.

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');
  }
};

Pikatesti

Testatkaa, miten hyvin ymmärrätte tämän oppitunnin POST-, PUT- ja DELETE-pyynnöt Axiosilla.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tässä oppitunnissa opitte, että axios.post lähettää JSON-rungon resurssin luomista varten ja palauttaa palvelimen luoman kohteen, axios.put/patch korvaa resurssin tai päivittää sitä osittain – päivittäkää tila Array.map-menetelmällä onnistumisen jälkeen ja axios.delete poistaa resurssin – päivittäkää tila Array.filter-menetelmällä ja käyttäkää optimistisia päivityksiä sujuvan käyttökokemuksen saavuttamiseksi. Seuraavaksi tutustumme Redux Toolkitiin monimutkaisen sovellustilan hallinnassa.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”POST, PUT ja DELETE Axiosilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “POST, PUT ja DELETE Axiosilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”POST, PUT ja DELETE Axiosilla”?

Lähettäkää dataa APIin Axiosin POST- ja PUT-menetelmillä, päivittäkää paikallinen tila vastauksen perusteella ja toteuttakaa poistotoiminto, joka poistaa kohteen sekä palvelimelta että listalta. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”POST, PUT ja DELETE Axiosilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Native Academy