Pular para conteúdo

Aula 08 – Consumo de APIs: Fetch e Axios 📡

Já vimos o fetch, mas hoje vamos aprofundar no consumo de dados reais e conhecer o Axios, uma biblioteca poderosa que facilita a vida do desenvolvedor.

🐙 Fetch vs Axios

O fetch é nativo do navegador, mas o Axios oferece recursos extras como cancelamento de requisições, instâncias reutilizáveis e transformação automática para JSON.

Instalação:

$ npm install axios

🛠️ Criando uma Instância Axios

Em vez de repetir a URL base em todo lugar, criamos um arquivo src/services/api.js.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.github.com'
});

export default api;

Usando no Componente:

useEffect(() => {
  api.get('/users/ricardotecpro')
     .then(response => setUsuario(response.data));
}, []);

🛑 Tratamento de Erros e Estados

Sempre que lidamos com internet, as coisas podem falhar. Devemos estar preparados.

try {
  const res = await api.get('/posts');
  setPosts(res.data);
} catch (error) {
  console.error("Ops! Algo deu errado", error);
  setMsgErro("Não foi possível carregar os dados.");
}

🚀 Prática da Aula

Vamos criar um "Dashboard de Criptomoedas".

  1. Use a CoinGecko API (ou qualquer outra pública).
  2. Liste o nome, símbolo e preço atual das 10 principais moedas.
  3. Adicione um botão de "Atualizar" que dispara a busca novamente através do Axios.
  4. Mostre uma mensagem de erro estilizada se a API estiver fora do ar.

📊 Fluxo da Requisição

sequenceDiagram
    participant User as Usuário
    participant React as Componente React
    participant API as Servidor API
    User->>React: Clica em "Carregar"
    React->>API: GET /dados (via Axios)
    API-->>React: 200 OK (JSON)
    React-->>User: Mostra Dados na Tela

Dica: Async/Await

Prefira usar async/await em vez de .then(). O código fica muito mais legível e fácil de dar manutenção.