Quiz da Nota: Consumindo APIs no Front-End com Fetch API

Fluxo completo com async/await, tratamento de loading, response.ok e try/catch.

3 questões 0 de 3 respondida(s)

Questão 1 de 3

Qual é uma pegadinha clássica da Fetch API em JavaScript quando o servidor responde com status 404 ou 500?

O fetch() converte automaticamente o erro em null sem retornar Promise. O fetch() não rejeita a Promise nem entra no catch; é preciso verificar response.ok. O fetch() recarrega a página inteira automaticamente.

Questão 2 de 3

Um trainee escreveu o código abaixo, mas sempre recebe "Promise {}" no console. Qual é o erro?

javascript

async function buscarNota() {
  const res = await fetch('/api/notas/1');
  const dados = res.json();
  console.log(dados);
}

Faltou usar await em res.json(), pois converter o corpo para JSON também é assíncrono. A função fetch() não pode ser usada dentro de funções async. Deveria ter usado JSON.parse(res) em vez de res.json().

Questão 3 de 3

Compare o tempo de execução dos dois jeitos de buscar dois endpoints independentes. O que muda na Opção B?

javascript

// Opção A
const trilhas = await fetch('/api/trilhas').then(r => r.json());
const tags = await fetch('/api/tags').then(r => r.json());

// Opção B
const [trilhas, tags] = await Promise.all([
  fetch('/api/trilhas').then(r => r.json()),
  fetch('/api/tags').then(r => r.json()),
]);

Na Opção B as duas requisições rodam em paralelo, reduzindo o tempo total de espera. Na Opção B a segunda requisição só começa depois que a primeira termina. Na Opção A as respostas voltam sempre em ordem alfabética.

Ao enviar, você verá sua pontuação e a explicação de cada questão.