Solicitação POST HTTP em React

Introdução

Ao trabalhar com APIs, muitas vezes queremos enviar dados ao servidor para processamento. Por exemplo, se tivermos uma lista de tarefas e quisermos adicioná-la, talvez por meio do envio de um formulário, usamos solicitações POST HTTP para enviar uma solicitação com uma carga útil para processamento e persistência potencial.

Neste artigo, aprenderemos como realizar solicitações POST HTTP no React usando duas abordagens comuns: a API Fetch e o Axios. Também saberemos como fazer isso em componentes funcionais e baseados em classes.

Usando a API Fetch, enviar uma solicitação POST HTTP com React é tão fácil quanto:

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 nos fornece uma alternativa elegante para enviar solicitações HTTP POST:

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

Se você quiser saber mais sobre essas abordagens e como elas funcionam – leia o restante do guia!

O que é uma solicitação POST HTTP?

Como o nome indica, as solicitações POST são usadas para postar dados em um endpoint – que normalmente os processa e os salva em um banco de dados. Esses dados podem vir de um formulário, ser salvos em um objeto ou obtidos de outra forma – mas normalmente são convertidos em uma representação JSON para consumo pela API REST.

O envio de solicitações HTTP com qualquer verbo é simplificado pelo fetch API (integrado) e bibliotecas como Axios. A API Fetch é um método integrado do navegador para realizar solicitações HTTP, enquanto Axios é um pacote externo que devemos instalar em nosso projeto antes de usar.

A escolha entre eles depende de você. A API Fetch é mais detalhada e não funciona com solicitações assíncronas, mas Axios é uma dependência externa. Mesmo assim – muitos preferem trabalhar com Axios em vez da API Fetch. Cobriremos ambos.

Ambos os métodos têm vantagens e desvantagens, mas é importante observar que eles podem lidar com os verbos HTTP padrão – POST, GET, PUT, PATCH, DELETE.

Em nosso exemplo, trabalharemos em uma lista de postagens que já buscamos em uma API simulada. Criaremos um formulário que receberá o título e o corpo de uma nova postagem e, uma vez enviado, enviará uma solicitação POST ao servidor simulado para processamento:

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;

Vamos agora tornar o formulário funcional para que possamos adicionar dados às listas de postagens em nosso site assim que o formulário for enviado.

Como realizar solicitação POST HTTP no componente funcional do React

Agora podemos realizar solicitações HTTP em componentes funcionais graças à introdução de ganchos no React. Anteriormente, os componentes funcionais eram usados ​​apenas para renderizar a UI.

Um componente funcional é criado quando uma função JavaScript (padrão ou ES6) retorna um elemento React (JSX).

Em vez de usar o objeto state no método construtor como acontece com componentes baseados em classe, agora usamos ganchos React como useState() para armazenar nossos dados antes de passá-los para os dados originais.

Como executar solicitação POST HTTP no componente funcional do React com API Fetch

Como a API Fetch é um método integrado do navegador que retorna um Promise, nós usamos o .then() e .catch() métodos para lidar com o sucesso e o fracasso. Também aceita um argumento obrigatório, que é a URL do recurso/API no qual queremos POST os dados, bem como um argumento indicando a solicitação HTTP, que no nosso 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;

No código acima, criamos um método que vincularemos ao formulário para que seja acionado quando o botão enviar do formulário for clicado. Começamos usando e.preventDefault() para evitar que a página seja recarregada ao enviar o formulário, o que é geralmente o que você quer que aconteça, mas não funciona tão bem para nossa demonstração:

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

Olhando para o fetch() chamada, adicionamos a URL como primeiro parâmetro obrigatório, e o segundo parâmetro leva o método de solicitação (POST), o body, e as header:

• body – contém os dados que queremos enviar para o endpoint da API, que devemos restringir, transformando-o em uma representação JSON baseada em texto.
• header – especifica o tipo de conteúdo, que no nosso caso é application/json, já que nossa carga útil é representada como uma string 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',
      },
   })
};

Finalmente, como este método retorna um Promise, extrairemos dele o conteúdo JSON (resposta do servidor), atualizaremos o posts estado para incluir os novos dados.

Para lidar com erros, também usamos o .catch() método:

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

Como executar solicitação POST HTTP no componente funcional do React com Axios

Explicamos como realizar solicitações POST com a API Fetch na seção anterior. Agora, vamos modificar o handleSubmit() método e execute solicitações POST com Axios.

Axios é uma biblioteca cliente HTTP que usa promessas para facilitar o envio solicitações HTTP assíncronas para pontos de extremidade REST. Por se tratar de uma biblioteca externa, devemos primeiro instalá-la em nosso projeto executando o seguinte comando no diretório do nosso projeto:

$ npm install axios

Depois de instalar o Axios com sucesso, podemos prosseguir com nossa solicitação 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);
      });
};

Olhando para o código acima, é muito mais fácil e requer menos sintaxe do que a API Fetch, pois não precisamos mais converter para JSON, trabalhar com cabeçalhos e até mesmo restringir nossos dados. Este padrão é extraído pelo Axios.

Como realizar uma solicitação POST HTTP no componente de classe do React

Solicitações POST em componentes de classe são tratadas de maneira diferente dos componentes funcionais porque não usamos mais ganchos React e, em vez disso, usamos o state objeto.

Um componente de classe é uma classe ES6 que retorna JSX e requer extensões React.

Como executar solicitação POST HTTP no componente de classe do React com API Fetch

A solicitação é muito semelhante à dos componentes funcionais. As únicas áreas em que encontraríamos algumas diferenças são ao armazenar dados em state e ao usar state valores porque não estamos mais usando o useState() gancho:

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;

Desta vez, não declaramos mais métodos com o const palavra-chave. Em vez disso, prefixe-os com this. Este método será acionado quando o botão de envio do formulário for clicado. Por ser um formulário, começamos usando e.preventDefault() para evitar que a página seja recarregada quando o formulário for enviado:

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

Assim como aprendemos anteriormente, a API Fetch aceita dois parâmetros. Um é o URL, enquanto o segundo contém opções como o método de solicitação (POST), body, que é a informação que estamos postando (deve ser restringida) e, em seguida, o 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',
      },
   })
};

Sabendo que isto é uma promessa, podemos agora anexar o .then() método para lidar com o sucesso e o .catch() método para lidar com uma situação se houver um erro ou falha na solicitação HTTP.

Como executar solicitação POST HTTP no componente de classe React com Axios

Vimos como realizar POST Solicitações HTTP em componentes baseados em classe. Isto é muito semelhante ao Axios, pois tudo o que precisamos fazer é instalar o Axios e depois substituir o handleSubmit() método, então agora usamos Axios em vez de 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));
};

Conclusão

Neste guia, aprendemos como usar os dois métodos principais do React para realizar solicitações POST HTTP. Também vimos como isso poderia ser feito tanto em componentes funcionais quanto em componentes baseados em classes, portanto este artigo pode nos servir independente do que for utilizado em nosso projeto.