Usando Axios no React: Exemplos para Requisições GET e POST

Axios é um cliente HTTP baseado em promessas que simplifica a realização de requisições HTTP em aplicações React. Ele otimiza tarefas como busca de dados de APIs e envio de dados para servidores. Neste guia, exploraremos como usar o Axios no React com exemplos práticos de requisições GET e POST.

Configurando o Axios no React

Para começar com o Axios em seu projeto React:

1. Instalar o Axios:

   npm install axios
   

2. Importar o Axios no seu componente:

   import axios from 'axios';
   

Fazendo Requisições GET

Uma requisição GET recupera dados de um endpoint específico. Veja como realizar uma requisição GET usando Axios em um componente React:

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Erro ao buscar dados:', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetchingComponent;

Explicação:

• Inicialização do Estado: useState inicializa data como um array vazio.
• Busca de Dados: axios.get recupera dados do endpoint da API.
• Hook de Efeito: useEffect garante que a requisição GET seja executada uma vez após a montagem do componente.
• Tratamento de Erros: Erros são capturados e registrados no console.

Fazendo Requisições POST

Uma requisição POST envia dados para um servidor para criar um novo recurso. Veja como realizar uma requisição POST usando Axios em um componente React:

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

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('Post criado:', response.data);
      })
      .catch(error => {
        console.error('Erro ao criar post:', error);
      });
  };

  return (
    <div>
      <h1>Criar Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Título:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Conteúdo:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">Enviar</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

Explicação:

• Inicialização do Estado: useState inicializa title e body como strings vazias.
• Manipulação do Formulário: O formulário captura a entrada do usuário para título e conteúdo do post.
• Função de Envio: handleSubmit previne o comportamento padrão de envio do formulário, constrói um objeto post e o envia usando axios.post.
• Tratamento de Erros: Erros são capturados e registrados no console.

Perguntas Frequentes

Conclusão

O Axios é uma ferramenta poderosa para lidar com requisições HTTP em aplicações React. Ao entender como realizar requisições GET e POST, você pode interagir eficientemente com APIs e gerenciar dados dentro de seus componentes React.