Rullst AcademyRullst Academy/Lição
JavaScript e interação · Lição 12 / 14

Fetch: receber não é confiar

Receber uma resposta é apenas o começo da leitura dos dados.

Trilhas de aprendizado18 min

Vamos descobrir juntos

  1. 1

    fetch retorna uma Promise de Response. Um status HTTP 404 ou 503 normalmente resolve essa promessa; verifique response.ok. Falhas de rede podem rejeitá-la sem fornecer uma Response acessível ao código.

  2. 2

    await response.json() lê e interpreta o corpo e pode falhar. JSON válido ainda pode ter formato errado: aqui precisamos de array, ids únicos, títulos, minutos válidos e done booleano. Não confie em dados só porque vieram de uma resposta.

  3. 3

    Na Rullst Academy, os cenários são simulados sem requisições de sugestões. Para HTTP real, no kit abra o terminal na pasta extraída e execute python server.py no Windows ou python3 server.py no macOS/Ubuntu. Acesse http://127.0.0.1:8768; veja README para instalar Python se necessário e Ctrl+C para encerrar. No lesson.js desta atividade, troque case=ready por case=http, case=json ou case=shape, salve e recarregue para comparar as respostas.

  4. 4

    Abrir file:// não reproduz a origem HTTP. Não desligue proteções do navegador para contornar isso. O servidor do kit escuta só no computador local e usa arquivos permitidos e dados fictícios. O exercício não exige chave, conta de API ou serviço externo.

Do exemplo à sua própria interação

Baixe o kit desta atividade, extraia e abra index.html no navegador. Edite lesson.js, salve e recarregue. Você não precisa instalar Node ou pacotes. O README explica HTTP local quando necessário.

A demonstração usa JavaScript preparado. Ela não executa seu código do editor. Baixe sua edição separadamente para testar no kit local.

Meus arquivos e GitHub
Experimentar o projeto que vamos construir

Planejador de pequenas missões

Crie, conclua e revise um plano de estudo com dados fictícios. As missões ficam apenas na memória desta página; ao recarregar, elas somem.

Use um título curto sem dados pessoais e minutos inteiros de 1 a 120. Até 20 missões.

Missões no plano
0
Minutos de todas as missões
0
Missões concluídas
0

Nenhuma missão neste filtro. Adicione uma ou escolha outro filtro.

    Laboratório de sugestões

    Por padrão, os cenários são simulados neste navegador. Nenhuma requisição de sugestões é enviada e seu plano não é substituído.

    Disponível no kit aberto por http://127.0.0.1:8768. Consulte o README; não precisa de uma conta externa.

      Esse JSON contém apenas as missões, não seu código. A demonstração não importa arquivos nem sincroniza aparelhos. O download do JavaScript editado fica no espaço de arquivos da lição.

      Links oficiais e próximo passo

      ✦
      SUA MISSÃO

      Separar falha de rede, status HTTP, JSON e formato esperado dos dados.

      Agora é a sua vez

      Oficina de descobertas

      Pensar antes de executar

      Uma requisição recebe HTTP 503; outra recebe HTTP 200 com JSON válido, mas sem os campos exigidos.
      Monte suas respostas e confira quando estiver pronto.
      Uma pausa para entender

      Como executar a atividade de fetch com origem HTTP?

      Preciso de uma pista

      Preveja o resultado, execute no seu arquivo e explique a diferença.

      Carregando sua jornada…

      Leve com você

      Execute sucesso, HTTP 503, JSON quebrado e formato incorreto. Na aba Network/Rede, registre status e corpo; compare com as mensagens da interface.

      No seu ritmo

      Meus arquivos e GitHub

      Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

      Manual do aluno

      O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

      Conferindo seu acesso à lição…

      Rullstpetbot

      A IA pode errar. Confira no material da lição.