render_macros: false

Aula 11 - APIs e Assincronismo 🌐

Conectando seu App ao Mundo

Agenda de Hoje 📅

1. O que é uma API REST?
2. O comando fetch()
3. Promises e Async/Await
4. O Bloco mágico {#await}
5. Estados: Loading, Success e Error
6. Prática: Buscador de Endereços (CEP)

1. O que é uma API? 📡

• É um conjunto de regras que permite que dois softwares conversem.
• O seu Svelte (Frontend) pede dados ao Servidor (Backend).
• O dado geralmente vem no formato JSON.

2. A língua universal: JSON 📋

{
  "id": 1,
  "nome": "Svelte Course",
  "ativo": true
}

• JSON é leve, simples de ler e nativo no JavaScript.

3. O comando fetch() 🐕

• Função nativa do navegador para fazer pedidos HTTP.
• Ele retorna uma Promise (Promessa).

fetch('https://api.exemplo.com/dados')
  .then(res => res.json())
  .then(dados => console.log(dados));

4. Async e Await ⏳

• Uma forma mais moderna e amigável de lidar com o tempo.

async function buscarDados() {
  const res = await fetch('url');
  const dados = await res.json();
  return dados;
}

• "Espere o servidor responder antes de ir para a próxima linha".

5. O Bloco {#await} do Svelte ✨

• O Svelte permite gerenciar a interface assíncrona direto no markup.
• Sem precisar criar variáveis carregando = true manuais!

5.1 Anatomia do

{#await promise}
  <p>Carregando... 🔄</p>
{:then dados}
  <p>O resultado é {dados.valor}</p>
{:catch erro}
  <p>Ops! Erro: {erro.message}</p>
{/await}

6. Sincronização de Estados 🌊

graph TD
    A[Início do Await] -->|Pendente| B(Exibe Loading)
    A -->|Sucesso| C(Exibe Dados)
    A -->|Falha| D(Exibe Erro)
    C --> E((Fim))
    D --> E

7. O Loop de Dados Profissional 🔄

• Frequentemente combinamos o {#await} com o {#each}.

{#await listarUsuarios()}
  <Skeleton />
{:then lista}
  {#each lista as user}
     <Card {user} />
  {/each}
{/await}

8. Boas Práticas de UX 💡

• Feedback visual: Nunca deixe a tela em branco enquanto carrega.
• Tratamento de Erro: Explique ao usuário o que aconteceu (ex: "Sem internet").
• Botão de Retry: Permita tentar carregar novamente.

9. Prática: Consulta de Usuários 👥

• Use a API: https://jsonplaceholder.typicode.com/users.
• Chame a função de busca no {#await}.
• Mostre o Nome e Email de cada usuário em uma lista.

10. Resumo da Aula ✅

• fetch() é a ponte com o servidor.
• Async/Await limpa o código JavaScript.
• {#await} do Svelte automatiza estados de carregamento.

Próxima Aula: CRUD Completo 🏗️

• GET, POST, PUT e DELETE.
• Criando registros na API.
• Gerenciamento completo de dados.

Dúvidas? 🤔

"A internet é uma conversa constante. Saber ouvir a API é fundamental."