Aula 11 - Consumo de API REST 🌐

Objetivo

Objetivo: Aprender a conectar sua aplicação Svelte ao mundo externo, realizando requisições HTTP para APIs reais, tratando estados de carregamento e erros de forma elegante com o bloco {#await}.

1. O que é uma API REST? 📡

Uma API (Application Programming Interface) permite que seu frontend "converse" com um servidor para buscar ou salvar dados. Usamos o protocolo HTTP e o formato JSON para essa conversa.

2. Fazendo requisições com `fetch` 🎣

O JavaScript moderno possui a função fetch nativa para fazer requisições. No Svelte, geralmente fazemos isso dentro de uma função async.

async function buscarDados() {
  const resposta = await fetch('https://api.exemplo.com/dados');
  if (resposta.ok) {
    return await resposta.json();
  } else {
    throw new Error('Falha ao carregar dados');
  }
}

3. Fluxo de Requisição Assíncrona (Mermaid) 📊

sequenceDiagram
    participant B as Browser (Svelte)
    participant A as API Externa
    B->>B: Inicia Estado 'Carregando'
    B->>A: GET /produtos
    A-->>B: Retorna JSON (Produtos)
    B->>B: Inicia Estado 'Sucesso'
    B->>B: Renderiza Lista na UI

4. O Superpoder do Svelte: `{#await}` ⏳

Diferente de outros frameworks onde você precisa criar várias variáveis de estado (loading, error, data), o Svelte tem um bloco nativo que resolve tudo isso de uma vez.

<script>
  let promessa = buscarDados();
</script>

{#await promessa}
  <p>⏳ Carregando dados...</p>
{:then dados}
  <ul>
    {#each dados as item}
      <li>{item.nome}</li>
    {/each}
  </ul>
{:catch erro}
  <p style="color: red">❌ Erro: {erro.message}</p>
{/await}

5. Simulação de Chamada de API 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Iniciando requisição para API...</span>
    <span data-ty="progress"></span>
    <span data-ty>GET https://api.api-ninjas.com/v1/quotes</span>
    <span data-ty>Status: 200 OK</span>
    <span data-ty># Dados recebidos! Atualizando a tela...</span>
</div>

6. Mini-Projeto: Gerador de Citações Aleatórias 🚀

Vamos colocar em prática: 1. Escolha uma API pública simples (ex: https://api.quotable.io/random ou https://dog.ceo/api/breeds/image/random). 2. No seu componente, crie uma função async que busque um dado dessa API. 3. Use o bloco {#await} para mostrar uma mensagem de carregamento e o resultado final. 4. Adicione um botão "Próxima" que chame a função novamente para atualizar o dado.

Dica

Ao clicar no botão "Próxima", basta fazer: promessa = buscarDados();. O Svelte detectará que a promessa mudou e voltará para o estado de carregamento automaticamente!

7. Exercício de Fixação 📝

Para que serve a palavra-chave await no JavaScript?
Quais são os três estados possíveis dentro de um bloco {#await}?
Como o Svelte decide quando mostrar o bloco {:then}?

Próxima Aula: Vamos construir uma aplicação completa com CRUD Completo e Integração! 🏗️