POST HTTP Solicitare în React

Introducere

Când lucrăm cu API-uri, de multe ori dorim să trimitem date către server pentru procesare. De exemplu, dacă avem o listă de sarcini de făcut și dorim să o adăugăm, poate prin trimiterea unui formular, folosim cereri HTTP POST pentru a trimite o solicitare cu încărcătură utilă pentru procesare și persistență potențială.

În acest articol, vom învăța cum să efectuăm solicitări POST HTTP în React folosind două abordări obișnuite: API-ul Fetch și Axios. De asemenea, vom afla cum să facem acest lucru în componente funcționale și bazate pe clasă.

Folosind API-ul Fetch, trimiterea unei cereri HTTP POST cu React este la fel de simplă ca:

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 ne oferă o alternativă elegantă pentru a trimite solicitări HTTP POST:

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

Dacă doriți să aflați mai multe despre aceste abordări și despre modul în care funcționează, vă rugăm să citiți restul ghidului!

Ce este o solicitare POST HTTP?

După cum sugerează și numele, solicitările POST sunt folosite pentru a posta date la un punct final - care apoi le procesează și le salvează într-o bază de date. Aceste date pot proveni dintr-un formular, pot fi salvate într-un obiect sau pot fi obținute în alt mod – dar sunt de obicei convertite într-o reprezentare JSON pentru ca API-ul REST să le consume.

Trimiterea cererilor HTTP cu orice verb este simplificată de Preluare API (încorporat) și biblioteci precum Axios. API-ul Fetch este o metodă de browser încorporată pentru efectuarea solicitărilor HTTP, în timp ce Axios este un pachet extern pe care trebuie să îl instalăm în proiectul nostru înainte de a folosi.

Alegerea dintre acestea depinde de tine. API-ul Fetch este mai detaliat și nu funcționează cu solicitări asincrone, dar Axios este o dependență externă. Chiar și așa – mulți preferă să lucreze cu Axios decât cu API-ul Fetch. Le vom acoperi pe amândouă.

Ambele metode au avantaje și dezavantaje, dar este important de reținut că pot gestiona verbele standard HTTP - POST, GET, PUT, PATCH, DELETE.

În cazul nostru, vom lucra cu o listă de postări pe care le-am preluat deja dintr-un API simulat. Vom crea un formular care preia titlul și corpul unei noi postări și, odată trimis, trimite o solicitare POST către serverul simulat pentru procesare:

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;

Acum să facem formularul funcțional, astfel încât să putem adăuga date la listele de postări de pe site-ul nostru odată ce formularul este trimis.

Cum se efectuează cererea POST HTTP în componenta funcțională a React

Acum putem efectua solicitări HTTP în componente funcționale datorită introducerii hook-urilor în React. Anterior, componentele funcționale erau folosite doar pentru redarea interfeței de utilizare.

O componentă funcțională este creată atunci când o funcție JavaScript (fie standard sau ES6) returnează un element React (JSX).

În loc să folosim obiectul de stare în metoda constructorului ca în cazul componentelor bazate pe clasă, acum folosim cârlige React, cum ar fi useState() pentru a stoca datele noastre înainte de a le trece în datele originale.

Cum se efectuează solicitarea POST HTTP în componenta funcțională a React cu API-ul Fetch

Deoarece API-ul Fetch este o metodă de browser încorporată care returnează a Promise, noi folosim .then() și .catch() metode de a gestiona succesul și eșecul. De asemenea, acceptă un argument obligatoriu, care este adresa URL a resursei/API-ului în care dorim să POSTăm datele, precum și un argument care indică cererea HTTP, care în cazul nostru este 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;

În codul de mai sus, am creat o metodă pe care o vom conecta la formular, astfel încât să fie declanșată atunci când se face clic pe butonul de trimitere al formularului. Am început prin a folosi e.preventDefault() pentru a preveni reîncărcarea paginii la trimiterea formularului, adică obișnuit ceea ce vrei să se întâmple, dar nu funcționează la fel de bine pentru demonstrația noastră:

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

Privind la fetch() apel, am adăugat URL-ul ca prim parametru obligatoriu, iar al doilea parametru preia metoda de solicitare (POST), body, Şi header:

• body – conține datele pe care dorim să le trimitem către punctul final API, lucru pe care trebuie să le trimitem strânge, transformându-l într-o reprezentare JSON bazată pe text.
• header – specifică tipul de conținut, care este în cazul nostru application/json, deoarece sarcina noastră utilă este reprezentată ca șir 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',
      },
   })
};

În cele din urmă, deoarece această metodă returnează a Promise, vom extrage conținutul JSON din acesta (răspunsul serverului), am actualizat posts stat să includă noile date.

Pentru a gestiona erorile, am folosit și .catch() metodă:

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

Cum se efectuează cererea POST HTTP în componenta funcțională a React cu Axios

Am explicat cum să efectuați solicitări POST cu API-ul Fetch în secțiunea anterioară. Acum, să modificăm handleSubmit() metoda și efectuați în schimb solicitări POST cu Axios.

Axios este o bibliotecă client HTTP care utilizează promisiuni pentru a facilita trimiterea solicitări HTTP asincrone la punctele finale REST. Deoarece este o bibliotecă externă, trebuie mai întâi să o instalăm în proiectul nostru rulând următoarea comandă în directorul proiectului nostru:

$ npm install axios

Odată ce am instalat cu succes Axios, putem trece la efectuarea cererii noastre 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);
      });
};

Privind codul de mai sus, este mult mai ușor și necesită mai puțină sintaxă decât API-ul Fetch, deoarece nu mai trebuie să facem conversie în JSON, să lucrăm cu anteturi și chiar să ne stringem datele. Acest boilerplate este extras de Axios.

Cum se efectuează solicitarea POST HTTP în componenta de clasă a React

Solicitările POST din componentele clasei sunt tratate diferit față de componentele funcționale, deoarece nu mai folosim cârlige React și în schimb folosim state obiect.

O componentă de clasă este o clasă ES6 care returnează JSX și necesită extensii React.

Cum se efectuează solicitarea POST HTTP în componenta de clasă a React cu API-ul Fetch

Cererea este foarte asemănătoare cu cea a componentelor funcționale. Singurele zone în care am găsi unele diferențe sunt atunci când stocăm datele state iar la utilizare state valori pentru că nu mai folosim useState() cârlig:

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;

De data aceasta, nu mai declarăm metode cu const cuvânt cheie. În schimb, prefixează-le cu this. Această metodă va fi declanșată atunci când se face clic pe butonul de trimitere al formularului. Deoarece este un formular, am început prin a folosi e.preventDefault() pentru a preveni reîncărcarea paginii la trimiterea formularului:

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

Așa cum am aflat mai devreme, API-ul Fetch preia doi parametri. Unul este adresa URL, în timp ce al doilea conține opțiuni precum metoda de solicitare (POST), body, care sunt informațiile pe care le postăm (trebuie să fie înșirate), apoi 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',
      },
   })
};

Știind că aceasta este o promisiune, acum putem atașa .then() metoda de a gestiona succesul și .catch() metodă de a gestiona o situație dacă există o eroare sau un eșec în cererea HTTP.

Cum se efectuează solicitarea POST HTTP în componenta de clasă React cu Axios

Am văzut cum să facem POST Cereri HTTP în componente bazate pe clasă. Acesta este foarte asemănător cu Axios, deoarece tot ce trebuie să facem este să instalăm Axios și apoi să îl înlocuim handleSubmit() metoda, așa că acum folosim Axios mai degrabă decât Fetch API:

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

Concluzie

În acest ghid, am învățat cum să folosim cele două metode principale din React pentru a efectua solicitări HTTP POST. Am văzut, de asemenea, cum ar putea fi realizate atât în ​​componente funcționale, cât și bazate pe clasă, astfel încât acest articol ne poate fi de folos indiferent de ceea ce este folosit în proiectul nostru.