Como fazer um POST de Axios no React JS

Neste artigo você aprenderá a como fazer um POST de Axios no React JS, uma ação muito comum ao lidar com APIs

Fala programador(a), beleza? Bora aprender mais sobre Axios com React JS!

React JS é uma biblioteca JavaScript popular usada para criar interfaces de usuário dinâmicas e de alta performance.

No entanto, uma aplicação React não trabalha sozinha; geralmente, ela precisa se comunicar com um servidor backend para executar operações como ler, escrever, atualizar e excluir dados.

Para isso, usamos solicitações HTTP. E quando se trata de realizar solicitações HTTP em uma aplicação JavaScript, Axios é uma das bibliotecas mais populares por aí.

Neste artigo, vamos aprender como fazer uma solicitação POST usando Axios em uma aplicação React.

O Que é Axios?

Axios é um cliente HTTP baseado em Promises que funciona tanto no navegador quanto no ambiente node.js.

Ele tem uma API limpa e fácil de usar que permite fazer solicitações HTTP de maneira muito mais simples e flexível do que usando as APIs internas do JavaScript, como fetch.

Configurando o Axios

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Antes de podermos usar o Axios, precisamos instalá-lo em nosso projeto. Você pode fazer isso executando o seguinte comando no terminal:

npm install axios

Depois de instalado, podemos importar o Axios em nosso componente da seguinte maneira:

import axios from 'axios';

Fazendo uma Solicitação POST

Vamos criar um componente React simples que faz uma solicitação POST para um servidor ao ser carregado.

Aqui está um exemplo de como você pode fazer isso usando Axios e o hook useEffect do React:

import React, { useEffect } from 'react';
import axios from 'axios';

function MyApp() {
  useEffect(() => {
    const postData = async () => {
      try {
        const response = await axios.post('https://meu-api.com/api/recursos', {
          nome: 'Meu Recurso',
          descricao: 'Esta é uma descrição do recurso',
        });

        console.log(response.data);
      } catch (error) {
        console.error('Houve um erro!', error);
      }
    };

    postData();
  }, []);

  return <div>Enviando dados...</div>;
}

export default MyApp;

Neste exemplo, definimos uma função assíncrona postData dentro do useEffect que é executada quando o componente é montado.

Essa função faz uma solicitação POST para um servidor usando axios.post(). Os dados que queremos enviar são passados como o segundo argumento para axios.post().

Se a solicitação for bem-sucedida, os dados da resposta serão registrados no console.

Se algo der errado, o erro será capturado e registrado.

Lidando com Respostas e Erros

Um dos principais benefícios do Axios é que ele facilita o manuseio de respostas e erros.

No exemplo anterior, usamos um bloco try/catch para capturar qualquer erro que possa ocorrer durante a solicitação.

Isso inclui erros de rede, bem como erros de resposta do servidor.

As respostas do Axios são encapsuladas em um objeto que contém informações úteis, como o status da resposta, o cabeçalho da resposta e os dados da resposta.

No exemplo anterior, registramos response.data no console, que contém os dados da resposta.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Fazer solicitações POST é uma parte fundamental da construção de aplicações web interativas. Com o Axios e o React, podemos fazer isso de maneira fácil e eficiente.

Neste guia, aprendemos como fazer uma solicitação POST com Axios em um componente React e como lidar com respostas e erros.

Esperamos que este guia tenha sido útil para você e que o ajude em seus futuros projetos com React e Axios!

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Fazendo o POST a partir de um formulário:

Na prática, quase nunca você quer disparar um POST assim que a tela abre

O normal é o usuário preencher alguma coisa e clicar num botão, aí sim o dado vai pro backend

Se liga em como fica com useState e onSubmit:

import React, { useState } from 'react';
import axios from 'axios';

function Formulario() {

const handleSubmit = async (e) => {
e.preventDefault();
setEnviando(true);

try {
const response = await axios.post('https://meu-api.com/api/recursos', { nome });
console.log(response.data);
} catch (error) {
console.error('Houve um erro!', error);
} finally {
setEnviando(false);
}
};

return (
<form onSubmit={handleSubmit}>
<input value={nome} onChange={(e) => setNome(e.target.value)} />
<button type="submit" disabled={enviando}>
{enviando ? 'Enviando...' : 'Enviar'}
</button>
</form>
);
}

export default Formulario;

Repara no e.preventDefault(): sem ele o navegador recarrega a página e o teu POST morre no meio do caminho

Já me ferrei uma vez por causa disso, o console piscava e sumia e eu jurando que era o axios haha

E aquele estado enviando serve de guarda: enquanto a requisição está no ar o botão fica desabilitado, aí o usuário não manda o mesmo cadastro três vezes de ansiedade 🙂

Enviando headers e token no POST:

O axios.post aceita um TERCEIRO argumento, e é ali que mora a configuração da requisição

É nele que você manda o cabeçalho de autenticação, por exemplo:

await axios.post(
'https://meu-api.com/api/recursos',
{ nome: 'Meu Recurso' },
{ headers: { Authorization: `Bearer ${token}` } }
);

A ordem importa: url, dados, configuração

Tome cuidado pra não trocar o segundo pelo terceiro, é o erro clássico de quem está começando

O corpo vai vazio, a API responde reclamando de campo obrigatório e você fica meia hora olhando pro backend achando que o problema é lá 😛

O POST falhou: como descobrir o porquê?

Cair no catch, sozinho, não diz muita coisa

Vale separar os cenários antes de sair chutando:

} catch (error) {
if (error.response) {
console.log(error.response.status, error.response.data);
} else if (error.request) {
console.log('a requisição saiu e não voltou resposta');
} else {
console.log('erro antes de sair', error.message);
}
}

Veio error.response? A API respondeu, então o problema está no que você mandou ou numa regra do backend, e o corpo da resposta geralmente aponta qual campo ele não gostou

Veio error.request? A requisição saiu e ninguém respondeu: URL errada, backend fora do ar ou bloqueio de CORS moram nessa caixa

Não veio nenhum dos dois? Aí o erro é do teu lado, antes mesmo de a requisição sair

Essa separação economiza um tempo absurdo de debug, faça o teste na próxima vez que der ruim

E quando o POST é um arquivo?

O segundo argumento não precisa ser um objeto comum

Pra upload você monta um FormData e passa ele no lugar:

const formData = new FormData();
formData.append('arquivo', arquivoSelecionado);

await axios.post('https://meu-api.com/api/upload', formData);

O resto continua igualzinho: try/catch em volta e response.data na volta

Ou seja, é o mesmo POST que você já aprendeu aqui, só muda o que vai dentro