POST HTTP Request v React

Predstavitev

Pri delu z API-ji pogosto želimo poslati podatke strežniku v obdelavo. Na primer, če imamo seznam opravil in ga želimo dodati, morda z oddajo obrazca, uporabimo zahteve HTTP POST, da pošljemo zahtevo s koristno obremenitvijo za obdelavo in morebitno obstojnost.

V tem članku se bomo naučili izvajati zahteve HTTP POST v Reactu z uporabo dveh običajnih pristopov: Fetch API in Axios. Spoznali bomo tudi, kako to storiti v funkcionalnih in razrednih komponentah.

Z uporabo API-ja Fetch je pošiljanje zahteve POST HTTP z React tako enostavno kot:

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 nam ponuja elegantno alternativo za pošiljanje zahtev HTTP POST:

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

Če želite izvedeti več o teh pristopih in njihovem delovanju – preberite preostanek vodnika!

Kaj je POST HTTP Request?

Kot pove že ime, se zahteve POST uporabljajo za objavo podatkov na končni točki – ki jih nato običajno obdela in shrani v bazo podatkov. Ti podatki lahko izvirajo iz obrazca, se shranijo v objekt ali se pridobijo na drug način – vendar se običajno pretvorijo v predstavitev JSON, ki jo uporabi REST API.

Pošiljanje zahtev HTTP s katerim koli glagolom je poenostavljeno z Fetch API (vgrajeno) in knjižnice, kot je npr Axios. Fetch API je vgrajena metoda brskalnika za izvajanje zahtev HTTP, medtem ko je Axios zunanji paket, ki ga moramo pred uporabo namestiti v naš projekt.

Izbira med temi je odvisna od vas. API Fetch je bolj podroben in ne deluje z asinhronimi zahtevami, vendar je Axios zunanja odvisnost. Kljub temu – mnogi raje delajo z Axios kot z API-jem Fetch. Pokrili bomo oboje.

Obe metodi imata prednosti in slabosti, vendar je pomembno omeniti, da lahko obravnavata standardne glagole HTTP – POST, GET, PUT, PATCH, DELETE.

V našem primeru bomo izdelali seznam objav, ki smo jih že pridobili iz lažnega API-ja. Ustvarili bomo obrazec, ki bo prevzel naslov in telo nove objave in ko bo oddan, bo poslal zahtevo POST lažnemu strežniku v obdelavo:

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;

Zdaj naredimo obrazec funkcionalen, da bomo lahko dodajali podatke na sezname objav na našem spletnem mestu, ko bo obrazec poslan.

Kako izvesti POST HTTP zahtevo v funkcionalni komponenti React

Zdaj lahko izvajamo zahteve HTTP v funkcionalnih komponentah, zahvaljujoč uvedbi kavljev v React. Prej so se funkcionalne komponente uporabljale samo za upodabljanje uporabniškega vmesnika.

Funkcionalna komponenta se ustvari, ko funkcija JavaScript (bodisi standardna bodisi ES6) vrne element React (JSX).

Namesto uporabe objekta stanja v metodi konstruktorja kot pri komponentah, ki temeljijo na razredu, zdaj uporabljamo kljuke React, kot je useState() za shranjevanje naših podatkov, preden jih posredujemo v izvirne podatke.

Kako izvesti POST HTTP zahtevo v funkcionalni komponenti React z API-jem Fetch

Ker je Fetch API vgrajena metoda brskalnika, ki vrne a Promise, uporabljamo .then() in .catch() metode za obvladovanje uspeha in neuspeha. Sprejema tudi obvezen argument, ki je URL vira/API-ja, v katerega želimo OBJAVITI podatke, kot tudi argument, ki označuje zahtevo HTTP, ki je v našem primeru 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;

V zgornji kodi smo ustvarili metodo, ki jo bomo povezali z obrazcem, tako da se sproži, ko se klikne gumb za oddajo obrazca. Začeli smo z uporabo e.preventDefault() preprečiti ponovno nalaganje strani ob oddaji obrazca, kar je navadno kar želite, da se zgodi, vendar ne deluje tako dobro za našo predstavitev:

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

Pogled na fetch() klic smo dodali URL kot prvi obvezni parameter, drugi parameter pa zajema metodo zahteve (POST), bodyIn header:

• body – vsebuje podatke, ki jih želimo poslati končni točki API, kar moramo nanizati, ki ga spremeni v besedilno predstavitev JSON.
• header – določa tip vsebine, kar v našem primeru je application/json, ker je naš koristni tovor predstavljen kot niz JSON:

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

Končno, ker ta metoda vrne a Promise, bomo iz nje ekstrahirali vsebino JSON (odziv strežnika), posodobil posts vključite nove podatke.

Za obravnavo napak smo uporabili tudi .catch() metoda:

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

Kako izvesti POST HTTP zahtevo v funkcionalni komponenti React z Axios

V prejšnjem razdelku smo razložili, kako izvesti zahteve POST z API-jem Fetch. Zdaj pa spremenimo handleSubmit() in namesto tega izvajajte zahteve POST z Axios.

Axios je odjemalska knjižnica HTTP, ki uporablja obljube za enostavno pošiljanje asinhrone zahteve HTTP na končne točke REST. Ker gre za zunanjo knjižnico, jo moramo najprej namestiti v naš projekt tako, da zaženemo naslednji ukaz v imeniku našega projekta:

$ npm install axios

Ko uspešno namestimo Axios, lahko nadaljujemo z izvedbo zahteve POST:

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

Če pogledamo zgornjo kodo, je veliko lažja in zahteva manj sintakse kot Fetch API, saj nam ni več treba pretvarjati v JSON, delati z glavami in celo stringirati naših podatkov. Axios abstrahira ta predlog.

Kako izvesti POST HTTP zahtevo v Reactovi komponenti razreda

Zahteve POST v komponentah razreda se obravnavajo drugače kot v funkcionalnih komponentah, ker ne uporabljamo več kavljev React in namesto tega uporabljamo state predmet.

Komponenta razreda je razred ES6, ki vrne JSX in zahteva razširitve React.

Kako izvesti zahtevo POST HTTP v Reactovi komponenti razreda z API-jem Fetch

Zahteva je zelo podobna zahtevi za funkcionalne komponente. Edina področja, kjer bi našli nekaj razlik, so pri shranjevanju podatkov state in pri uporabi state vrednosti, ker jih ne uporabljamo več useState() kljuka:

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;

Tokrat ne deklariramo več metod z const ključna beseda. Namesto tega jim dodajte predpono z this. Ta metoda se bo sprožila, ko kliknete gumb za pošiljanje v obrazcu. Ker gre za obliko, smo začeli z uporabo e.preventDefault() da preprečite ponovno nalaganje strani, ko je obrazec oddan:

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

Tako kot smo izvedeli prej, Fetch API uporablja dva parametra. Eden je URL, medtem ko drugi vsebuje možnosti, kot je metoda zahteve (POST), body, ki so informacije, ki jih objavljamo (morajo biti nizane), in nato 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',
      },
   })
};

Ker vemo, da je to obljuba, lahko zdaj priložimo .then() metoda za obvladovanje uspeha in .catch() metoda za obravnavo situacije, če je v zahtevi HTTP napaka ali napaka.

Kako izvesti zahtevo POST HTTP v Reactovi komponenti razreda z Axios

Videli smo, kako se izvaja POST Zahteve HTTP v komponentah, ki temeljijo na razredu. To je zelo podobno Axiosu, saj moramo le namestiti Axios in nato zamenjati handleSubmit() metodo, zato zdaj namesto API-ja Fetch uporabljamo Axios:

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

zaključek

V tem priročniku smo se naučili, kako uporabiti dve primarni metodi v Reactu za izvajanje POST HTTP zahtev. Videli smo tudi, kako jih je mogoče izvesti v funkcionalnih komponentah in komponentah, ki temeljijo na razredih, tako da nam ta članek lahko služi ne glede na to, kaj uporabljamo v našem projektu.