Aula 10 – Consumo de API REST 🌐

Nenhuma aplicação moderna vive isolada. Precisamos buscar dados de servidores e salvar informações. Para isso, usamos o protocolo HTTP e a biblioteca Axios.

---

🏗️ O que é uma API REST?

É uma forma padronizada de comunicação entre sistemas. Usamos Verbos HTTP para dizer o que queremos fazer:

• GET: Buscar dados.
• POST: Criar novos dados.
• PUT: Atualizar dados existentes.
• DELETE: Remover dados.

---

🚀 Usando Axios no Vue

O Axios é um cliente HTTP baseado em Promessas que facilita muito as requisições.

# Instale a biblioteca
$ npm install axios

Exemplo de busca de dados no onMounted:

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const usuarios = ref([])

onMounted(async () => {
  try {
    const response = await axios.get('https://api.exemplo.com/users')
    usuarios.value = response.data
  } catch (error) {
    console.error("Erro ao carregar usuários:", error)
  }
})
</script>

---

📊 Fluxo da Requisição

sequenceDiagram
    participant V as Vue (Client)
    participant A as API (Server)
    V->>A: GET /produtos
    Note right of A: Processa no Banco de Dados
    A-->>V: JSON { id: 1, nome: 'Teclado' }
    Note left of V: Vue atualiza a Ref e a tela muda!

---

🧱 Organização: O padrão Service

Não é bom espalhar axios.get por todos os componentes. Criamos uma pasta services/ para isolar a lógica de API.

Service Pattern

Crie src/services/api.js para configurar a URL base e reutilizar as funções de chamada.

---

🧠 Tratamento de Erros e Loading

Experiência do Usuário (UX)

Sempre mostre um "Carregando..." enquanto a API não responde e trate erros com mensagens amigáveis para o usuário caso o servidor caia.

---

💻 Prática Sugerida

Utilize a JSONPlaceholder (uma API de testes gratuita) para listar posts de um blog falso em seu projeto Vue.

---

📝 Exercício

1. Qual a vantagem do Axios sobre o fetch nativo do navegador?
2. Por que usamos o async/await ao lidar com requisições HTTP?
3. O que acontece com a interface do Vue quando atribuímos o resultado da API a uma ref?

🚀 Próxima Aula: Como compartilhar dados entre páginas sem ficar passando centenas de props? Conheça o Pinia!