Esperando dados: promises e fetch
Trate resultados que demoram e diferencie uma falha de rede de um erro HTTP.
- Explicar o que uma Promise representa
- Usar async e await com try/catch
- Verificar response.ok antes de ler o JSON
Uma requisição de rede leva tempo. Uma Promise representa um resultado que vai chegar depois ou falhar. Uma função async devolve uma Promise, e await pausa essa função até o resultado se resolver. O resto da página continua respondendo enquanto ela espera.
1async function loadCount() {
2 const count = await Promise.resolve(3);
3 return count + 1;
4}
5console.log(await loadCount());4
Experimente
Até 15 XPSiga uma requisição de dados
Avance pelo navegador, pelo servidor e pela atualização da página. Preveja quando os dados ficam disponíveis.
1async function showProducts() {
2 const status = document.querySelector("#status");
3 status.textContent = "Loading…";
4 try {
5 const response = await fetch("/api/products");
6 if (!response.ok) throw new Error("HTTP " + response.status);
7 const products = await response.json();
8 status.textContent = products.length + " products ready";
9 } catch {
10 status.textContent = "Could not load products. Try again.";
11 }
12}Uma resposta 404 ou 500 normalmente cumpre a Promise do fetch; verifique response.ok. Uma falha de rede a rejeita. O executor deste curso bloqueia requisições de rede, então o exercício de programação usa um pequeno mock baseado em Promise. Veja requisições de rede no MDN e fetch.
Principais conclusões
await espera, dentro de uma função async, que uma Promise se resolva.
Verifique response.ok para erros HTTP e capture falhas de rede ou de análise.
Mostre os estados de carregamento, sucesso e falha para quem usa a página.
Quiz da aula
4 perguntas · aprovação com 3 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em JavaScript
Escreva o programa, execute-o com os casos de teste e use o retorno para desenvolver suas habilidades em JavaScript.
Trate o resultado de uma API
O exercício fornece uma requisição async simulada. Aguarde-a com await e imprima Loaded N products se ok for verdadeiro; caso contrário, Could not load products. A entrada é ok,count ou error,count. O executor aguarda o seu código async; nenhuma rede real é usada.
- Sucesso
- Erro HTTP
O JavaScript roda em um frame isolado do navegador, com limite de 1,5 segundo. A entrada fica disponível na variável de string input.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…