POST HTTP-kérés a Reactban

Bevezetés

Amikor API-kkal dolgozunk, gyakran szeretnénk adatokat küldeni a szervernek feldolgozás céljából. Például, ha van egy listánk a teendőinkről, és azt szeretnénk kiegészíteni, esetleg egy űrlap elküldésével, akkor POST HTTP kéréseket használunk, hogy elküldjük a kérelmet a feldolgozáshoz és a lehetséges tartóssághoz.

Ebből a cikkből megtudjuk, hogyan hajthat végre POST HTTP kéréseket a React alkalmazásban két általános megközelítéssel: a Fetch API és az Axios használatával. Megismerjük, hogyan kell ezt megtenni funkcionális és osztály alapú komponensekben.

A Fetch API használatával a POST HTTP kérés elküldése a React segítségével olyan egyszerű, mint:

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

Az Axios elegáns alternatívát kínál a HTTP POST kérések küldésére:

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

Ha többet szeretne megtudni ezekről a megközelítésekről és működésükről – kérjük, olvassa el az útmutató többi részét!

Mi az a POST HTTP-kérés?

Ahogy a név is sugallja, a POST kéréseket arra használják, hogy adatokat tegyenek fel egy végpontra – amely azután általában feldolgozza és adatbázisba menti. Ezek az adatok származhatnak egy űrlapról, objektumba menthetők, vagy más módon beszerezhetők – de általában JSON-reprezentációvá alakítják át a REST API számára.

A HTTP kérések bármely igével történő küldését egyszerűvé teszi a Fetch API (beépített) és könyvtárak, mint pl Axios. A Fetch API egy beépített böngésző metódus HTTP-kérések végrehajtására, míg az Axios egy külső csomag, amelyet használat előtt telepítenünk kell a projektünkbe.

A választás ezek közül az Önön múlik. A Fetch API részletesebb, és nem működik aszinkron kérésekkel, de az Axios külső függőség. Ennek ellenére sokan szívesebben dolgoznak az Axiosokkal, mint a Fetch API-val. Mindkettőt fedezzük.

Mindkét módszernek vannak előnyei és hátrányai, de fontos megjegyezni, hogy képesek kezelni a szabványos HTTP igéket – POST, GET, PUT, PATCH, DELETE.

Példánkban azoknak a bejegyzéseknek a listáját fogjuk elkészíteni, amelyeket már letöltöttünk egy hamis API-ból. Létrehozunk egy űrlapot, amely felveszi egy új bejegyzés címét és törzsét, majd a beküldés után egy POST kérést küld a hamis szervernek feldolgozásra:

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;

Tegyük most működőképessé az űrlapot, hogy az űrlap elküldése után adatokat tudjunk hozzáadni a weboldalunkon található bejegyzések listájához.

A POST HTTP-kérés végrehajtása a React funkcionális komponensében

A React hook-jainak köszönhetően mostantól funkcionális komponensekben is végrehajthatunk HTTP kéréseket. Korábban a funkcionális összetevőket csak a felhasználói felület megjelenítésére használták.

Funkcionális komponens jön létre, amikor egy JavaScript-függvény (standard vagy ES6) React elemet (JSX) ad vissza.

Ahelyett, hogy az állapotobjektumot használnánk a konstruktor metódusban, mint az osztályalapú komponenseknél, most React hookokat használunk, mint pl. useState() hogy adatainkat az eredeti adatokba való átadás előtt tároljuk.

POST HTTP-kérés végrehajtása a React funkcionális komponensében a Fetch API segítségével

Mivel a Fetch API egy beépített böngésző metódus, amely visszaadja a Promise, használjuk a .then() és a .catch() módszerek a siker és a kudarc kezelésére. Elfogad egy kötelező argumentumot is, amely annak az erőforrásnak/API-nak az URL-je, amelybe az adatokat POSTolni akarjuk, valamint a HTTP kérést jelző argumentumot, ami esetünkben 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;

A fenti kódban létrehoztunk egy metódust, amelyet az űrlaphoz kapcsolunk, így az akkor aktiválódik, amikor az űrlap elküldése gombjára kattintanak. A használattal kezdtük e.preventDefault() hogy megakadályozzuk az oldal újratöltését az űrlap beküldésekor, ami az rendszerint amit szeretnél, hogy megtörténjen, de nem működik olyan jól a bemutatónkban:

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

Nézve a fetch() hívás esetén az URL-t hozzáadtuk az első kötelező paraméterként, a második paraméter pedig a kérési metódust (POST), a body, És a header:

• body – tartalmazza azokat az adatokat, amelyeket el szeretnénk küldeni az API végpontnak, amit nekünk kell szigorít, szöveges alapú JSON-reprezentációvá alakítva.
• header – megadja a tartalom típusát, ami esetünkben az application/json, mivel a rakományunk JSON-karakterláncként jelenik meg:

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

Végül, mivel ez a metódus visszaadja a Promise, kivonjuk belőle a JSON tartalmat (a szerver válasza), frissítette a posts állítsa be az új adatokat.

A hibák kezeléséhez a .catch() eljárás:

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

POST HTTP kérés végrehajtása a React funkcionális komponensében az Axios segítségével

Az előző részben elmagyaráztuk, hogyan lehet POST-kéréseket végrehajtani a Fetch API-val. Most módosítsuk a handleSubmit() módszert, és helyette hajtson végre POST kéréseket az Axios segítségével.

Az Axios egy HTTP-ügyfélkönyvtár, amely ígéreteket használ a küldés megkönnyítésére aszinkron HTTP kérések a REST végpontokhoz. Mivel ez egy külső könyvtár, először telepítenünk kell a projektünkbe a következő parancs futtatásával a projektünk könyvtárában:

$ npm install axios

Miután sikeresen telepítettük az Axiost, folytathatjuk a POST kérés végrehajtását:

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

Ha a fenti kódot nézzük, ez sokkal egyszerűbb és kevesebb szintaxist igényel, mint a Fetch API, mivel többé nem kell JSON-ba konvertálnunk, fejlécekkel dolgoznunk, és még az adatainkat sem kell szigorítani. Ezt a kazánlemezt az Axios absztrahálja.

POST HTTP-kérés végrehajtása a React osztálykomponensében

Az osztályösszetevők POST-kéréseit másképpen kezelik, mint a funkcionális összetevőkben, mivel már nem használunk React hook-okat, hanem a state tárgy.

Az osztályösszetevő egy ES6 osztály, amely JSX-et ad vissza, és React kiterjesztést igényel.

POST HTTP-kérés végrehajtása a React osztálykomponensében a Fetch API segítségével

A kérés nagyon hasonló a funkcionális komponensek kéréséhez. Csak az adatok tárolása során tapasztalhatunk eltéréseket state és használat közben state értékeket, mert már nem használjuk a useState() horog:

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;

Ezúttal már nem deklarálunk módszereket a const kulcsszó. Ehelyett jelölje be őket a következővel: this. Ez a módszer akkor lép életbe, amikor az űrlap elküldése gombjára kattintanak. Mivel ez egy űrlap, a használatával kezdtük e.preventDefault() hogy megakadályozza az oldal újratöltését az űrlap elküldésekor:

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

Ahogy korábban megtudtuk, a Fetch API két paramétert vesz fel. Az egyik az URL, míg a második olyan opciókat tartalmaz, mint például a kérési mód (POST), body, ami az általunk közzétett infó (karikázni kell), majd a 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',
      },
   })
};

Tudva, hogy ez ígéret, most csatolhatjuk a .then() módszer a siker kezelésére és a .catch() módszer a helyzet kezelésére, ha hiba vagy hiba van a HTTP-kérésben.

POST HTTP-kérés végrehajtása a React osztálykomponensében az Axios segítségével

Láttuk, hogyan kell teljesíteni POST HTTP kérések osztályalapú összetevőkben. Ez nagyon hasonlít az Axioshoz, mivel mindössze annyit kell tennünk, hogy telepítjük az Axiost, majd kicseréljük a handleSubmit() módszerrel, ezért most az Axiost használjuk a Fetch API helyett:

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

Következtetés

Ebben az útmutatóban megtanultuk, hogyan használhatja a React két elsődleges módszerét a POST HTTP-kérések végrehajtására. Azt is láttuk, hogy ezek hogyan valósíthatók meg funkcionális és osztály alapú komponensekben is, így ez a cikk a projektünkben használtaktól függetlenül szolgálhat számunkra.