Consumo de API REST 🌐

Aula 10 - Integrando com o Mundo Externo

🔌 Conectando o Frontend ao Backend

• Frontend (Vue): Interface e Experiência
• Backend (API): Banco de Dados e Lógica de Negócio
• A integração acontece via protocolo HTTP

🛠️ O que é uma API REST?

• Padrão de comunicação universal
• Utiliza verbos HTTP:
• GET: Buscar dados
• POST: Criar dados
• PUT/PATCH: Editar dados
• DELETE: Remover dados

🥊 Fetch vs Axios

• Fetch: Nativo do Browser, sintaxe mais longa
• Axios: Biblioteca externa, mais poderosa e intuitiva
• Faz JSON automático
• Suporta Interceptadores
• Melhor tratamento de erros

📦 Instalando o Axios

npm install axios

🏗️ Criando Instância Axios

import axios from 'axios'
const api = axios.create({
  baseURL: 'https://minhaapi.com'
})

🕒 Async / Await

• A forma moderna de lidar com processos que demoram

  async function buscarDados() {
    const response = await api.get('/produtos')
    produtos.value = response.data
  }
  

🛡️ Tratamento de Erros: try/catch

• E se a internet cair? E se o servidor der erro 500?

  try {
    await api.get('/...')
  } catch (error) {
    alert('Erro ao carregar dados!')
  }
  

🔄 Fluxo de Dados API

sequenceDiagram
    participant User
    participant Vue
    participant API
    User->>Vue: Clica em "Listar"
    Vue->>API: GET /produtos
    API-->>Vue: JSON { items: [...] }
    Vue->>Vue: Atualiza ref(produtos)
    Vue-->>User: Mostra lista na tela

🐌 Feedback de Carregamento (Loading)

• Nunca deixe o usuário no escuro!
• Use uma variável loading = true antes do await
• Mude para false no bloco finally

🔍 Parâmetros na URL (Query Params)

• Buscar por filtros:

  api.get('/busca', { params: { nome: 'Vue' } })
  // Gerará: /busca?nome=Vue
  

🏗️ Cadeia de Requisições

• Quando uma requisição depende da outra
• Use await em sequência para manter o código limpo e organizado

🧪 JSON Server (Mock API)

• Para testes locais rápidos
• Cria um backend real a partir de um arquivo .json
• Ideal para a fase de aprendizado

🏗️ Desafio da Aula

• Integrar com a API JSONPlaceholder
• Listar Usuários em um componente
• Mostrar detalhe do endereço ao clicar em um usuário
• Implementar estado de Loading e tratamento de erro

🏁 Resumo

• Axios facilita o consumo de dados
• Sempre use async/await para clareza
• Trate erros para não quebrar a aplicação

🏁 Dúvidas?

Boas requisições! Próxima aula: Gerenciamento de Estado (Pinia).