🚀 Capítulo 13: APIs - Holocron
🎯 Objetivo da Aula
Ao final desta aula, você saberá como conectar a sua aplicação Vue a uma API externa da internet usando o comando fetch combinado com o hook onMounted, permitindo trazer dados reais para a tela.
🏢 O Cenário Prático (Seu Desafio)
O Holocron é o banco de dados dos Jedi. Você precisa acessar o Holocron da Galáxia para listar os planetas reais do universo de Star Wars! Usaremos a API pública swapi.dev para buscar esses dados.
🧠 Fundamentos: A Teoria Traduzida
Para buscar dados no Vue, usamos a mesma estratégia do React:
fetch(): Função do JavaScript para ir na internet buscar os dados.onMounted(): Usamos este hook para disparar a busca apenas uma vez assim que a página carregar.
Uma vez que os dados chegam da internet, nós os salvamos em uma variável reativa (ref), e o Vue atualiza o HTML automaticamente graças ao v-for.
📖 Exemplo Guiado: Buscando Planetas
Vamos buscar a lista de planetas do Holocron.
🛠️ Passo a Passo
Abra o arquivo src/App.vue e altere o código:
<template>
<div>
<h1>🪐 Holocron: Planetas da Galaxia</h1>
<ul>
<!-- Listamos os planetas que vieram da API -->
<li v-for="(planeta, index) in planetas" :key="index">
<strong>{{ planeta.name }}</strong> - Clima: {{ planeta.climate }}
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const planetas = ref([]);
onMounted(async () => {
// Fazemos a requisição para a API
const resposta = await fetch('https://swapi.dev/api/planets/');
const dados = await resposta.json();
// Guardamos os resultados no nosso ref
planetas.value = dados.results;
});
</script>🕹️ Como Executar e Testar no VS Code
- Salve o arquivo e veja o navegador.
- Pode demorar um segundo (é o tempo de ir na internet).
- A lista com “Tatooine”, “Alderaan” e outros aparecerá na tela!
🛠️ Prática Obrigatória 1
Crie uma variável reativa chamada carregando começando como true. Enquanto os dados não chegam, use o v-if para mostrar a mensagem “Carregando dados…“. Mude para false assim que os dados forem salvos.
🛠️ Prática Obrigatória 2
Mude a URL do fetch para https://swapi.dev/api/people/ e liste o nome dos personagens em vez dos planetas.
🔑 Gabarito de Código/Fórmulas
Prática 1:
No <template>:
<p v-if="carregando">Carregando dados do Holocron...</p>No <script setup>:
const carregando = ref(true);
onMounted(async () => {
const resposta = await fetch('https://swapi.dev/api/planets/');
const dados = await resposta.json();
planetas.value = dados.results;
carregando.value = false; // Desliga o carregando
});