Reaktsioonis POST HTTP taotlus

Sissejuhatus

API-dega töötades tahame sageli saata andmeid serverisse töötlemiseks. Näiteks kui meil on ülesannete loend ja tahame seda täiendada, võib-olla vormi esitamise kaudu, kasutame POST HTTP päringuid, et saata päring koos kasuliku koormusega töötlemiseks ja võimalikuks püsimiseks.

Sellest artiklist õpime, kuidas täita Reactis POST HTTP-päringuid, kasutades kahte tavalist lähenemisviisi: Fetch API ja Axios. Samuti õpime tundma, kuidas seda teha funktsionaalsetes ja klassipõhistes komponentides.

Fetch API abil on Reactiga POST HTTP päringu saatmine sama lihtne kui:

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 pakub meile elegantse alternatiivi HTTP POST-päringute saatmiseks:

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

Kui soovite nende lähenemisviiside ja nende toimimise kohta rohkem teada saada – lugege juhendi ülejäänud osa!

Mis on POST HTTP-päring?

Nagu nimigi viitab, kasutatakse POST-päringuid andmete postitamiseks lõpp-punkti, mis seejärel tavaliselt töötleb neid ja salvestab andmebaasi. Need andmed võivad pärineda vormilt, olla objektile salvestatud või muul viisil hankitud, kuid tavaliselt teisendatakse need JSON-i esituseks, mida REST API tarbib.

HTTP-päringute saatmise mis tahes verbiga muudab lihtsaks Tõmba API (sisseehitatud) ja teegid nagu Axios. Fetch API on sisseehitatud brauseri meetod HTTP-päringute täitmiseks, samas kui Axios on väline pakett, mille peame enne kasutamist oma projekti installima.

Nende vahel valimine on teie enda teha. Fetch API on üksikasjalikum ja ei tööta asünkroonsete päringutega, kuid Axios on väline sõltuvus. Sellegipoolest eelistavad paljud töötada Axiosega, mitte Fetch API-ga. Me käsitleme mõlemat.

Mõlemal meetodil on eelised ja puudused, kuid on oluline märkida, et nad saavad hakkama standardsete HTTP-verbidega - POST, GET, PUT, PATCH, DELETE.

Meie näites koostame loendi postitustest, mille oleme juba näidis-API-st toonud. Loome vormi, mis võtab uue postituse pealkirja ja sisu ning pärast selle esitamist saadab POST-päringu näidisserverisse töötlemiseks:

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;

Teeme nüüd vormi funktsionaalseks, et saaksime pärast vormi esitamist oma veebisaidi postituste loenditesse andmeid lisada.

Kuidas täita Reacti funktsionaalses komponendis POST HTTP-päring

Tänu Reacti konksude kasutuselevõtule saame nüüd täita HTTP-päringuid funktsionaalsetes komponentides. Varem kasutati funktsionaalseid komponente ainult kasutajaliidese renderdamiseks.

Funktsionaalne komponent luuakse siis, kui JavaScripti funktsioon (kas standardne või ES6) tagastab elemendi React (JSX).

Selle asemel, et kasutada konstruktorimeetodis olekuobjekti nagu klassipõhiste komponentide puhul, kasutame nüüd Reacti konkse, näiteks useState() salvestada meie andmed enne nende edastamist algandmetesse.

Kuidas täita Reacti funktsionaalses komponendis POST HTTP taotlust Fetch API abil

Kuna Fetch API on sisseehitatud brauseri meetod, mis tagastab a Promise, kasutame .then() ja .catch() meetodid edu ja ebaõnnestumiste käsitlemiseks. Samuti aktsepteerib see kohustuslikku argumenti, milleks on selle ressursi/API URL, millesse tahame andmeid POSTida, samuti HTTP-päringut näitava argumendi, mis meie puhul 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;

Ülaltoodud koodis lõime meetodi, mille lingime vormiga, nii et see käivitub, kui klõpsate vormi esitamisnupul. Alustasime kasutamisega e.preventDefault() et vältida lehe uuesti laadimist vormi esitamisel, mis on tavaliselt mida sa tahad juhtuda, kuid ei tööta meie demo jaoks nii hästi:

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

Vaadates fetch() kõne, lisasime URL-i esimese kohustusliku parameetrina ja teine ​​parameeter võtab päringumeetodi (POST), bodyJa header:

• body – sisaldab andmeid, mida tahame API lõpp-punktile saata, mida me peame nöörida, muutes selle tekstipõhiseks JSON-i esituseks.
• header – määrab sisutüübi, mis meie puhul on application/json, kuna meie kasulik koormus on esitatud JSON-stringina:

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

Lõpuks, kuna see meetod tagastab a Promise, eraldame sellest JSON-i sisu (serveri vastus), värskendasime posts lisage uued andmed.

Vigade käsitlemiseks kasutasime ka .catch() meetod:

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

Kuidas täita POST HTTP-päring Reacti funktsionaalses komponendis koos Axiosega

Eelmises jaotises selgitasime, kuidas Fetch API-ga POST-päringuid teha. Nüüd muudame handleSubmit() meetodil ja sooritage selle asemel POST-päringud Axiosega.

Axios on HTTP-kliendi teek, mis kasutab saatmise hõlbustamiseks lubadusi asünkroonsed HTTP-päringud REST lõpp-punktidesse. Kuna tegemist on välise teegiga, peame selle esmalt oma projekti installima, käivitades oma projekti kataloogis järgmise käsu:

$ npm install axios

Kui oleme Axiose edukalt installinud, saame jätkata oma POST-i päringu täitmist:

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

Ülaltoodud koodi vaadates on see palju lihtsam ja nõuab vähem süntaksit kui Fetch API, kuna me ei pea enam JSON-iks teisendama, päistega töötama ega isegi andmeid karmistama. Selle katlaplaadi on Axios võtnud ära.

Kuidas sooritada POST HTTP-päring Reacti klassikomponendis

Klassi komponentide POST-päringuid käsitletakse erinevalt funktsionaalsete komponentide puhul, kuna me ei kasuta enam Reacti konkse ja kasutame selle asemel state objekt

Klassikomponent on ES6 klass, mis tagastab JSX-i ja nõuab Reacti laiendusi.

Kuidas täita POST HTTP-päring Reacti klassikomponendis Fetch API abil

Taotlus on väga sarnane funktsionaalsete komponentide omaga. Ainsad valdkonnad, kus leiame mõningaid erinevusi, on andmete salvestamine state ja kasutamisel state väärtusi, sest me ei kasuta enam useState() konks:

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;

Seekord me enam meetodeid kasutades ei deklareeri const märksõna. Selle asemel lisage nende eesliide this. See meetod käivitub, kui klõpsate vormi esitamisnupul. Kuna tegemist on vormiga, alustasime kasutamisega e.preventDefault() lehe uuesti laadimise vältimiseks vormi esitamisel:

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

Nagu me varem õppisime, võtab Fetch API kaks parameetrit. Üks on URL, samas kui teine ​​sisaldab selliseid valikuid nagu päringu meetod (POST), body, mis on meie postitatav teave (peab olema stringitud) ja seejärel 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',
      },
   })
};

Teades, et see on lubadus, saame nüüd selle lisada .then() meetod edu ja .catch() meetod olukorra lahendamiseks, kui HTTP-päringus on viga või tõrge.

Kuidas täita POST HTTP-päring Reacti klassikomponendis koos Axiosega

Oleme näinud, kuidas esineda POST HTTP-päringud klassipõhistes komponentides. See on väga sarnane Axiosega, kuna peame ainult installima Axiose ja seejärel asendama handleSubmit() meetodit, seega kasutame nüüd Axiost, mitte Fetch API-d:

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

Järeldus

Selles juhendis õppisime, kuidas kasutada Reacti kahte peamist meetodit POST HTTP päringute tegemiseks. Samuti nägime, kuidas neid saab teha nii funktsionaalsetes kui ka klassipõhistes komponentides, nii et see artikkel võib meid teenindada olenemata sellest, mida meie projektis kasutatakse.