POST HTTP -pyyntö Reactissa

esittely

Kun työskentelemme API:iden kanssa, haluamme usein lähettää tietoja palvelimelle käsittelyä varten. Jos meillä on esimerkiksi luettelo tehtävistä ja haluamme lisätä siihen, ehkä lomakkeen lähettämisen kautta, käytämme POST HTTP-pyyntöjä lähettääksemme pyynnön, jossa on hyötykuorma käsittelyä ja mahdollista pysyvyyttä varten.

Tässä artikkelissa opimme suorittamaan POST HTTP-pyynnöt Reactissa käyttämällä kahta yleistä lähestymistapaa: Fetch API ja Axios. Opimme myös, miten tämä tehdään toiminnallisissa ja luokkakohtaisissa komponenteissa.

Fetch API:n avulla POST HTTP-pyynnön lähettäminen Reactilla on yhtä helppoa kuin:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios tarjoaa meille tyylikkään vaihtoehdon HTTP POST -pyyntöjen lähettämiseen:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

Jos haluat oppia lisää näistä lähestymistavoista ja niiden toiminnasta – lue oppaan loppuosa!

Mikä on POST HTTP -pyyntö?

Kuten nimestä voi päätellä, POST-pyyntöjä käytetään tietojen lähettämiseen päätepisteeseen – joka sitten yleensä käsittelee sen ja tallentaa sen tietokantaan. Nämä tiedot voivat tulla lomakkeesta, ne voidaan tallentaa objektiin tai saada muulla tavalla – mutta yleensä ne muunnetaan JSON-esitykseen REST API:n käytettäväksi.

HTTP-pyyntöjen lähettäminen millä tahansa verbillä on helppoa Nouda API (sisäänrakennettu) ja kirjastot, kuten Axios. Fetch API on sisäänrakennettu selainmenetelmä HTTP-pyyntöjen suorittamiseen, kun taas Axios on ulkoinen paketti, joka meidän on asennettava projektiimme ennen käyttöä.

Valinta näiden välillä on sinun. Fetch API on monisanaisempi eikä toimi asynkronisten pyyntöjen kanssa, mutta Axios on ulkoinen riippuvuus. Silti monet haluavat työskennellä Axioiden kanssa Fetch API:n sijaan. Katamme molemmat.

Molemmilla menetelmillä on etuja ja haittoja, mutta on tärkeää huomata, että ne voivat käsitellä tavallisia HTTP-verbejä - POST, GET, PUT, PATCH, DELETE.

Esimerkissämme laadimme luettelon viesteistä, jotka olemme jo hakeneet valesovellusliittymästä. Luomme lomakkeen, joka ottaa uuden viestin otsikon ja tekstin ja lähettää POST-pyynnön valepalvelimelle käsittelyä varten:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

Tehdään nyt lomakkeesta toimiva, jotta voimme lisätä tietoja verkkosivuillamme oleviin postauslistoihin lomakkeen lähetyksen jälkeen.

Kuinka suorittaa POST HTTP -pyyntö Reactin toiminnallisessa osassa

Voimme nyt suorittaa HTTP-pyyntöjä toiminnallisissa komponenteissa Reactin koukkujen käyttöönoton ansiosta. Aiemmin toiminnallisia komponentteja käytettiin vain käyttöliittymän renderöintiin.

Toiminnallinen komponentti luodaan, kun JavaScript-funktio (joko standardi tai ES6) palauttaa React-elementin (JSX).

Sen sijaan, että käyttäisimme tilaobjektia konstruktorimenetelmässä, kuten luokkapohjaisten komponenttien kanssa, käytämme nyt React-koukkuja, kuten useState() tallentaaksemme tietomme ennen niiden siirtämistä alkuperäisiin tietoihin.

POST HTTP -pyynnön suorittaminen Reactin toiminnallisessa komponentissa Fetch API:lla

Koska Fetch API on sisäänrakennettu selainmenetelmä, joka palauttaa a Promise, käytämme .then() ja .catch() menetelmiä käsitellä onnistumisia ja epäonnistumisia. Se hyväksyy myös pakollisen argumentin, joka on sen resurssin/API:n URL-osoite, johon haluamme POST-lähettää tiedot, sekä HTTP-pyyntöä ilmaisevan argumentin, joka tässä tapauksessa on POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

Yllä olevaan koodiin loimme menetelmän, jonka linkitämme lomakkeeseen, jotta se käynnistyy, kun lomakkeen lähetyspainiketta napsautetaan. Aloitimme käyttämällä e.preventDefault() estääksesi sivua latautumasta uudelleen lomaketta lähetettäessä, mikä on yleensä mitä haluat tapahtuvan, mutta se ei toimi yhtä hyvin esittelyssämme:

const handleSubmit = (e) => {
   e.preventDefault();
};

Tarkasteltaessa fetch() kutsu, lisäsimme URL-osoitteen ensimmäiseksi pakolliseksi parametriksi, ja toinen parametri ottaa pyyntömenetelmän (POST), body, ja header:

• body – sisältää tiedot, jotka haluamme lähettää API-päätepisteeseen, mikä meidän täytyy kiristää, muuttaen siitä tekstipohjaisen JSON-esityksen.
• header – määrittää sisältötyypin, joka meidän tapauksessamme on application/json, koska hyötykuormamme on esitetty JSON-merkkijonona:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Lopuksi, koska tämä menetelmä palauttaa a Promise, poimimme siitä JSON-sisällön (palvelimen vastaus), päivitimme posts sisällyttää uudet tiedot.

Virheiden käsittelyyn käytimme myös .catch() menetelmä:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

Kuinka suorittaa POST HTTP -pyyntö Reactin toiminnallisessa komponentissa Axiosin avulla

Selitimme edellisessä osiossa, kuinka POST-pyyntöjä suoritetaan Fetch API:lla. Muutetaan nyt handleSubmit() menetelmä ja suorita POST-pyynnöt sen sijaan Axiosilla.

Axios on HTTP-asiakaskirjasto, joka käyttää lupauksia helpottaakseen lähettämistä asynkroniset HTTP-pyynnöt REST-päätepisteisiin. Koska se on ulkoinen kirjasto, meidän on ensin asennettava se projektiimme suorittamalla seuraava komento projektimme hakemistossa:

$ npm install axios

Kun olemme asentaneet Axiosin onnistuneesti, voimme jatkaa POST-pyyntömme suorittamista:

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

Yllä olevaa koodia tarkasteltaessa se on paljon helpompaa ja vaatii vähemmän syntaksia kuin Fetch API, koska meidän ei enää tarvitse muuntaa JSON-muotoon, työskennellä otsikoiden kanssa ja jopa rajoittaa tietojamme. Tämä kattilalevy on abstrakti Axios.

Kuinka suorittaa POST HTTP -pyyntö Reactin luokkakomponentissa

Luokan komponenttien POST-pyynnöt käsitellään eri tavalla kuin toiminnallisissa komponenteissa, koska emme enää käytä React-koukkuja, vaan käytämme sen sijaan state esine.

Luokkakomponentti on ES6-luokka, joka palauttaa JSX:n ja vaatii React-laajennuksia.

POST HTTP -pyynnön suorittaminen Reactin luokkakomponentissa Fetch API:lla

Pyyntö on hyvin samanlainen kuin toiminnallisten komponenttien pyyntö. Ainoat alueet, joilla havaitsemme joitain eroja, ovat tietojen tallentaminen state ja käytettäessä state arvot, koska emme enää käytä useState() koukku:

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

Tällä kertaa emme enää julista menetelmiä const avainsana. Sen sijaan, etuliite ne this. Tämä menetelmä käynnistyy, kun lomakkeen lähetyspainiketta napsautetaan. Koska se on lomake, aloitimme käyttämällä e.preventDefault() estääksesi sivua latautumasta uudelleen lomakkeen lähettämisen yhteydessä:

handleSubmit = (e) => {
   e.preventDefault();
};

Kuten aiemmin opimme, Fetch API ottaa kaksi parametria. Yksi on URL-osoite, kun taas toinen sisältää vaihtoehtoja, kuten pyyntömenetelmän (POST), body, jotka ovat lähettämämme tiedot (täytyy rajoittaa), ja sitten headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Koska tiedämme, että tämä on lupaus, voimme nyt liittää sen .then() tapa käsitellä menestystä ja .catch() tapa käsitellä tilannetta, jos HTTP-pyynnössä on virhe tai vika.

Kuinka suorittaa POST HTTP -pyyntö Reactin luokkakomponentissa Axiosin avulla

Olemme nähneet, kuinka toimia POST HTTP-pyynnöt luokkapohjaisissa komponenteissa. Tämä on hyvin samanlainen kuin Axios, koska meidän tarvitsee vain asentaa Axios ja vaihtaa sitten handleSubmit() menetelmä, joten käytämme nyt Axiosta Fetch API:n sijaan:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

Yhteenveto

Tässä oppaassa opimme käyttämään Reactin kahta ensisijaista menetelmää POST HTTP-pyyntöjen suorittamiseen. Näimme myös, kuinka ne voidaan tehdä sekä toiminnallisissa että luokkapohjaisissa komponenteissa, joten tämä artikkeli voi palvella meitä riippumatta siitä, mitä projektissamme käytetään.