Pular para conteúdo

Aula 08 📡

Consumo de APIs: Fetch e Axios

O que vamos aprender hoje? 📚

  1. Fetch vs Axios
  2. Async / Await
  3. Tratamento de Erros
  4. Services e Organização

1. Ferramentas de Rede 🛠️

Axios: O Padrão Ouro 🥇

  • Mais simples que o fetch.
  • JSON automático.
  • Suporte a instâncias e interceptadores.

Comparação ⚖️

// Fetch: 2 passos
.then(res => res.json())

// Axios: 1 passo direto
const res = await axios.get(url);

2. Async / Await 🕰️

Chega de "Callback Hell" 🤯

  • Código assíncrono que parece síncrono.
  • Mais fácil de ler.
  • Ideal para usar dentro do useEffect.

3. Lidando com Problemas 🛑

try / catch 🛡️

  • A internet falhou?
  • Use catch para não quebrar o site.
  • Mostre um erro amigável ao usuário.

4. Arquitetura Pro 🏗️

Services 📂

  • Não coloque URLs de API dentro do componente.
  • Crie uma pasta services e centralize tudo.
  • Facilita mudar a URL do servidor no futuro!

🚀 Desafio da Aula

  • Consumir a API do GitHub ou Weather API.
  • Criar uma instância do Axios configurada.
  • Mostrar Loading e Erros visuais.

Fim da Aula 08 🎓

Próxima Aula: Context API!