Exercícios: Aula 10 - Consumo de API REST 🌐

1. Promises e Async/Await

Converta a seguinte estrutura de .then() para uma função usando async/await com bloco try/catch:

axios.get('/api/users').then(res => {
  console.log(res.data)
}).catch(err => {
  console.error(err)
})

2. Configuração do Axios

Instale o Axios no seu projeto (npm install axios). Crie uma instância customizada do Axios em src/services/api.js que já possua uma baseURL definida (ex: https://jsonplaceholder.typicode.com).

3. Exibindo Dados da API

Crie um componente que, ao ser montado (onMounted), dispare uma requisição GET para a rota /posts da API JSONPlaceholder. Armazene o resultado em um array reativo e exiba apenas os títulos dos 10 primeiros posts na tela.

4. Feedback de Carregamento

Adicione uma variável reativa loading (booleana) ao componente anterior. Inicie-a como true, e mude para false após a conclusão da requisição. Use um v-if no HTML para exibir uma mensagem "Carregando..." enquanto os dados não chegam.

5. Desafio: Buscador de Usuário

Crie um input de texto onde o usuário digita um ID. Ao clicar em um botão "Buscar", o app deve fazer um GET para /users/:id. Exiba o nome e o e-mail do usuário encontrado ou uma mensagem "Usuário não encontrado" em caso de erro 404.