React e Axios: Guia Completo para Requisições HTTP Eficientes

No universo do desenvolvimento web moderno, a comunicação com APIs é uma tarefa fundamental. Para aplicações construídas com React, uma biblioteca JavaScript popular para criar interfaces de usuário, a escolha de um cliente HTTP robusto e fácil de usar é crucial. É aqui que o Axios se destaca como uma das opções mais populares e eficientes. Este artigo explora como integrar e utilizar o Axios em projetos React para realizar requisições HTTP, manipular dados e gerenciar respostas de APIs de forma eficaz.

O que é o Axios?

O Axios é um cliente HTTP baseado em Promises, projetado para funcionar tanto no navegador quanto em ambientes Node.js. Ele simplifica o processo de envio de requisições assíncronas para APIs REST e o tratamento das respostas. Suas principais características incluem:

• Requisições XMLHttpRequests do navegador: Permite fazer chamadas HTTP tradicionais.
• Requisições http de node.js: Funciona perfeitamente no lado do servidor.
• Suporte a Promises API: Facilita o código assíncrono com .then() e .catch(), além de ser compatível com async/await.
• Interceptação de requisições e respostas: Permite modificar requisições ou respostas globalmente (ex: adicionar tokens de autenticação, logs).
• Transformação de dados de requisição e resposta: Converte automaticamente dados JSON.
• Cancelamento de requisições: Oferece a capacidade de abortar requisições em andamento.
• Transformações automáticas para dados JSON: Não há necessidade de converter manualmente os dados JSON.
• Suporte no lado do cliente para proteção contra XSRF (Cross-Site Request Forgery): Ajuda a mitigar ataques comuns.

Devido à sua simplicidade e poder, o Axios é amplamente adotado pela comunidade de desenvolvedores JavaScript.

Integrando o Axios em Projetos React

A integração do Axios em um projeto React é um processo direto, começando pela sua instalação e importação nos componentes necessários.

Instalação do Axios

Para adicionar o Axios ao seu projeto React, utilize o gerenciador de pacotes npm (ou Yarn). Abra o terminal na pasta do seu projeto e execute o comando:

npm install axios

Este comando adicionará o Axios às dependências do seu projeto, listadas no arquivo package.json.

Importando o Axios

Após a instalação, você pode importar o Axios em qualquer componente React onde precisar fazer requisições HTTP:

import axios from 'axios';

Realizando Requisições HTTP com Axios e React

O Axios facilita a execução de diversos tipos de requisições HTTP, como GET, POST, PUT, PATCH e DELETE.

Configurando uma Instância Base do Axios

Para evitar a repetição da URL base da sua API em todas as requisições, é uma boa prática criar uma instância do Axios com configurações padrão. Isso é feito com axios.create():

const apiClient = axios.create({
  baseURL: 'http://localhost:3000/courses', // Exemplo de URL base para uma API local
  // Outras configurações globais, como headers, podem ser adicionadas aqui
  // headers: { 'X-Auth-Key': 'seuTokenSecreto' }
});

Esta instância apiClient pode ser usada em todo o aplicativo para fazer chamadas à API especificada.

Requisições GET com Axios

Requisições GET são usadas para buscar dados de um servidor. Em um componente React, você pode buscar dados quando o componente é montado, utilizando o hook useEffect (para componentes funcionais) ou o método de ciclo de vida componentDidMount (para componentes de classe).

// Em um componente funcional React
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:3000/courses'
});

function CourseList() {
  const [courses, setCourses] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCourses = async () => {
      try {
        const response = await apiClient.get('/'); // O endpoint relativo à baseURL
        setCourses(response.data);
        console.log('Dados recebidos:', response.data);
      } catch (err) {
        console.error('Erro ao buscar cursos:', err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchCourses();
  }, []); // Array de dependências vazio para executar apenas na montagem

  if (loading) return <p>Carregando...</p>;
  if (error) return <p>Erro ao carregar dados.</p>;

  return (
    <div>
      <h1>Lista de Cursos</h1>
      <ul>
        {courses.map(course => (
          <li key={course.id}>{course.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default CourseList;

No vídeo de referência, o exemplo utiliza um construtor de classe, que é uma abordagem mais antiga. A utilização de useEffect com async/await é a prática moderna em componentes funcionais.

Requisições POST com Axios

Para enviar dados para o servidor (criar um novo recurso), utiliza-se uma requisição POST. O Axios permite enviar um objeto de dados como segundo argumento.

const createCourse = async (newCourseData) => {
  try {
    // newCourseData seria algo como { title: 'Novo Curso de React', author: 'Adrian Twarog' }
    const response = await apiClient.post('/', newCourseData);
    console.log('Curso criado:', response.data);
    // Atualizar a lista de cursos ou estado da UI conforme necessário
    // Por exemplo, chamando fetchCourses() novamente ou adicionando o novo curso ao estado.
  } catch (err) {
    console.error('Erro ao criar curso:', err);
  }
};

No vídeo, um exemplo simples de criação de curso é demonstrado, e a importância de atualizar o estado da aplicação após a criação de um novo item é implícita.

Requisições DELETE com Axios

Para remover um recurso, utiliza-se a requisição DELETE, geralmente passando o ID do recurso na URL.

const deleteCourse = async (courseId) => {
  try {
    await apiClient.delete(`/	ext_bslash	ext_bslash${courseId}`);
    console.log(`Curso com ID ${courseId} deletado.`);
    // Atualizar a UI, por exemplo, removendo o curso da lista no estado.
  } catch (err) {
    console.error('Erro ao deletar curso:', err);
  }
};

Requisições PATCH (ou PUT) com Axios

Para atualizar um recurso existente, podem ser usadas requisições PATCH (para atualizações parciais) ou PUT (para substituição completa do recurso). O exemplo do vídeo foca em uma atualização simples do título.

const updateCourseTitle = async (courseId, newTitle) => {
  try {
    const response = await apiClient.patch(`/	ext_bslash	ext_bslash${courseId}`, { title: newTitle });
    console.log('Curso atualizado:', response.data);
    // Atualizar a UI com o curso modificado.
  } catch (err) {
    console.error('Erro ao atualizar curso:', err);
  }
};

Recursos Avançados e Boas Práticas com Axios

Tratamento de Erros

É fundamental tratar os erros que podem ocorrer durante as requisições HTTP. Com Promises, isso é feito com o bloco .catch(). Com async/await, utiliza-se o bloco try...catch, como demonstrado nos exemplos anteriores. Isso permite que a aplicação lide graciosamente com falhas de rede, erros do servidor (como 404 ou 500) e outros problemas.

Configuração de Requisições com Axios

O Axios permite configurar cada requisição individualmente ou globalmente. Parâmetros de URL podem ser passados através do objeto params:

apiClient.get('/', {
  params: {
    _limit: 3, // Limitar a 3 resultados
    _start: 0  // Começar do primeiro resultado (paginação)
  }
});

Headers customizados, como tokens de autenticação, também podem ser definidos na instância criada com axios.create() ou em cada requisição individualmente.

// Configuração global na instância
const authenticatedApiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: { 'Authorization': `Bearer ${localStorage.getItem('userToken')}` }
});

// Configuração por requisição
apiClient.get('/user-profile', {
  headers: {
    'X-Custom-Header': 'valorCustomizado'
  }
});

Utilizando Axios sem uma Instância Global

Embora criar uma instância seja recomendado para APIs que você acessa frequentemente, o Axios também pode ser usado diretamente, fornecendo a URL completa em cada chamada. Isso é útil para requisições pontuais a diferentes APIs.

axios.get('https://api.externa.com/dados', {
  params: { /* ... */ }
}).then(response => {
  // ...
}).catch(error => {
  // ...
});

Interceptadores

Os interceptadores do Axios são uma ferramenta poderosa para executar código antes que uma requisição seja enviada ou depois que uma resposta seja recebida. Eles são ideais para, por exemplo, adicionar automaticamente tokens de autenticação a todas as requisições ou para tratar erros de forma global.

// Interceptador de requisição
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('userToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// Interceptador de resposta
apiClient.interceptors.response.use(response => {
  // Qualquer código de status dentro do range de 2xx causa essa função ser disparada
  return response;
}, error => {
  // Qualquer código de status fora do range de 2xx causa essa função ser disparada
  if (error.response && error.response.status === 401) {
    // Lidar com erro de não autorizado, por exemplo, redirecionar para login
  }
  return Promise.reject(error);
});

O vídeo menciona brevemente a capacidade de configuração de headers, que é um caso de uso comum para interceptadores.

Conclusão

O Axios oferece uma maneira elegante e poderosa de lidar com requisições HTTP em aplicações React. Sua API baseada em Promises, combinada com recursos como instâncias configuráveis, interceptadores e transformação automática de JSON, simplifica significativamente o desenvolvimento de funcionalidades que dependem de comunicação com APIs externas. Ao seguir as práticas demonstradas, como o tratamento de erros e a configuração adequada, os desenvolvedores podem construir aplicações React mais robustas, manuteníveis e eficientes.