Fetch API: O Carteiro da Internet

O que vais aprender nesta aula:

  • O que é uma API e JSON
  • Fazer pedidos HTTP com fetch()
  • Tratar a resposta e convertê-la em dados úteis

🧠 Teoria (com Analogia e Contexto Real)

O teu site vive no browser, mas os dados vivem no servidor. Precisamos de ir buscá-los.

🐶 Analogia do Cão e o Jornal

1. Tu (O Site) dás ordem ao cão: "Vai buscar!".

2. O Cão (Fetch) corre até à caixa de correio (Servidor/API).

3. O Jornal (JSON) é o que ele traz na boca. Mas vem enrolado dentro de um saco plástico!

4. .json() é o ato de tirar o saco plástico para poderes ler as notícias.

O que é JSON?

JavaScript Object Notation. É basicamente texto formatado como objetos JS. É a língua universal da internet.

💻 Prática (Orientada e Progressiva)

O `fetch` devolve uma Promise!

A Dança dos dois .then()

fetch("https://api.exemplo.com/dados")
    .then(resposta => resposta.json()) // 1. Tirar o plástico (Converte para JS)
    .then(dados => {
        console.log(dados); // 2. Usar os dados (Objeto/Array real)
    })
    .catch(erro => console.error("Falhou tudo!"));

🧪 Consumir API Real (JSONPlaceholder)

Vamos buscar utilizadores falsos a uma API pública.

(A lista está vazia...)

✅ Verificação de Conhecimento

1. Porque precisamos de dois `.then()`?

Porque o fetch falha sempre na primeira vez.
O primeiro lê os cabeçalhos e prepara o corpo (Stream), o segundo recebe os dados prontos.
É apenas uma regra de estilo, podia ser tudo num.

2. O que é o formato JSON?

Um programa para abrir ficheiros de texto.
Java Security Object Network.
Um formato de texto leve para troca de dados, baseado em objetos JS.

🏠