Richiesta POST HTTP in reazione

Introduzione

Quando si lavora con le API, spesso si desidera inviare dati al server per l'elaborazione. Ad esempio, se abbiamo un elenco di cose da fare e desideriamo aggiungerlo, magari tramite l'invio di un modulo, utilizziamo le richieste POST HTTP per inviare una richiesta con un carico utile per l'elaborazione e la potenziale persistenza.

In questo articolo impareremo come eseguire richieste POST HTTP in React utilizzando due approcci comuni: l'API Fetch e Axios. Impareremo anche come farlo in componenti funzionali e basati su classi.

Utilizzando l'API Fetch, inviare una richiesta POST HTTP con React è facile come:

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 ci fornisce un'elegante alternativa per inviare richieste HTTP POST:

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

Se desideri saperne di più su questi approcci e su come funzionano, leggi il resto della guida!

Che cos'è una richiesta POST HTTP?

Come suggerisce il nome, le richieste POST vengono utilizzate per inviare i dati a un endpoint, che in genere li elabora e li salva in un database. Questi dati possono provenire da un modulo, essere salvati in un oggetto o essere ottenuti in un altro modo, ma in genere vengono convertiti in una rappresentazione JSON per l'utilizzo da parte dell'API REST.

L'invio di richieste HTTP con qualsiasi verbo è semplificato dal Fetch API (integrato) e librerie come Axios. L'API Fetch è un metodo browser integrato per l'esecuzione di richieste HTTP, mentre Axios è un pacchetto esterno che dobbiamo installare nel nostro progetto prima di utilizzarlo.

La scelta tra questi dipende da te. L'API Fetch è più dettagliata e non funziona con richieste asincrone, ma Axios è una dipendenza esterna. Anche così, molti preferiscono lavorare con Axios piuttosto che con l'API Fetch. Copriremo entrambi.

Entrambi i metodi presentano vantaggi e svantaggi, ma è importante notare che possono gestire i verbi HTTP standard: POST, GET, PUT, PATCH, DELETE.

Nella nostra istanza, lavoreremo su un elenco di post che abbiamo già recuperato da un'API fittizia. Creeremo un modulo che prende il titolo e il corpo di un nuovo post e, una volta inviato, invia una richiesta POST al server fittizio per l'elaborazione:

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;

Ora rendiamo il modulo funzionale in modo da poter aggiungere dati agli elenchi di post sul nostro sito Web una volta inviato il modulo.

Come eseguire una richiesta POST HTTP nel componente funzionale di React

Ora possiamo eseguire richieste HTTP in componenti funzionali grazie all'introduzione di hook in React. In precedenza, i componenti funzionali venivano utilizzati solo per il rendering dell'interfaccia utente.

Un componente funzionale viene creato quando una funzione JavaScript (standard o ES6) restituisce un elemento React (JSX).

Anziché utilizzare l'oggetto state nel metodo del costruttore come con i componenti basati sulla classe, ora utilizziamo hook React come useState() per memorizzare i nostri dati prima di trasferirli nei dati originali.

Come eseguire una richiesta POST HTTP nel componente funzionale di React con l'API Fetch

Poiché l'API Fetch è un metodo browser integrato che restituisce a Promise, noi usiamo il .then() ed .catch() metodi per gestire il successo e il fallimento. Accetta anche un argomento obbligatorio, che è l'URL della risorsa/API in cui vogliamo inviare i dati POST, nonché un argomento che indica la richiesta HTTP, che nel nostro caso è 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;

Nel codice sopra, abbiamo creato un metodo che collegheremo al modulo in modo che venga attivato quando si fa clic sul pulsante di invio del modulo. Abbiamo iniziato usando e.preventDefault() per evitare che la pagina si ricarichi durante l'invio del modulo, ovvero generalmente cosa vuoi che accada, ma non funziona altrettanto bene per la nostra demo:

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

Guardando il fetch() call, abbiamo aggiunto l'URL come primo parametro obbligatorio e il secondo parametro accetta il metodo di richiesta (POST), il body, e il header:

• body – contiene i dati che vogliamo inviare all'endpoint API, cosa che dobbiamo stringere, trasformandolo in una rappresentazione JSON basata su testo.
• header – specifica il tipo di contenuto, che nel nostro caso lo è application/json, poiché il nostro carico utile è rappresentato come una stringa 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',
      },
   })
};

Infine, poiché questo metodo restituisce a Promise, estrarremo il contenuto JSON da esso (risposta del server), aggiorneremo il file posts stato per includere i nuovi dati.

Per gestire gli errori, abbiamo anche utilizzato il .catch() Metodo:

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

Come eseguire una richiesta POST HTTP nel componente funzionale di React con Axios

Abbiamo spiegato come eseguire le richieste POST con l'API Fetch nella sezione precedente. Ora modifichiamo il handleSubmit() metodo ed eseguire invece richieste POST con Axios.

Axios è una libreria client HTTP che utilizza le promesse per semplificare l'invio richieste HTTP asincrone agli endpoint REST. Poiché è una libreria esterna, dobbiamo prima installarla nel nostro progetto eseguendo il seguente comando nella directory del nostro progetto:

$ npm install axios

Dopo aver installato correttamente Axios, possiamo procedere con la nostra richiesta 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);
      });
};

Osservando il codice sopra, è molto più semplice e richiede meno sintassi rispetto all'API Fetch, poiché non è più necessario convertire in JSON, lavorare con le intestazioni e persino stringere i nostri dati. Questo boilerplate è astratto da Axios.

Come eseguire una richiesta POST HTTP nel componente di classe di React

Le richieste POST nei componenti di classe vengono gestite in modo diverso rispetto ai componenti funzionali perché non utilizziamo più gli hook React e utilizziamo invece il state oggetto.

Un componente di classe è una classe ES6 che restituisce JSX e richiede estensioni React.

Come eseguire una richiesta POST HTTP nel componente di classe di React con l'API Fetch

La richiesta è molto simile a quella dei componenti funzionali. Le uniche aree in cui troveremmo alcune differenze sono durante la memorizzazione dei dati state e quando si usa state valori perché non stiamo più utilizzando il useState() gancio:

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;

Questa volta, non dichiariamo più metodi con il const parola chiave. Invece, anteponili con this. Questo metodo verrà attivato quando si fa clic sul pulsante di invio del modulo. Poiché è un modulo, abbiamo iniziato utilizzando e.preventDefault() per evitare che la pagina si ricarichi al momento dell'invio del modulo:

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

Proprio come abbiamo appreso in precedenza, l'API Fetch accetta due parametri. Uno è l'URL, mentre il secondo contiene opzioni come il metodo di richiesta (POST), body, che è l'informazione che stiamo pubblicando (deve essere stringata), e poi il file 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',
      },
   })
};

Sapendo che questa è una promessa, ora possiamo allegare il .then() metodo per gestire il successo e il .catch() metodo per gestire una situazione se si verifica un errore o un errore nella richiesta HTTP.

Come eseguire una richiesta POST HTTP nel componente di classe di React con Axios

Abbiamo visto come esibirsi POST Richieste HTTP nei componenti basati sulla classe. Questo è molto simile ad Axios, poiché tutto ciò che dobbiamo fare è installare Axios e quindi sostituire il file handleSubmit() metodo, quindi ora utilizziamo Axios anziché 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));
};

Conclusione

In questa guida, abbiamo appreso come utilizzare i due metodi principali in React per eseguire richieste POST HTTP. Abbiamo anche visto come potrebbero essere realizzati sia in componenti funzionali che basati su classi, quindi questo articolo può essere utile indipendentemente da ciò che viene utilizzato nel nostro progetto.