11 Assincronismo e APIs
Nem toda tarefa no JavaScript termina imediatamente.
Chamamos isso de comportamento assíncrono.
Exemplos:
- requisições de rede;
- leitura de arquivos;
- timers (
setTimeout,setInterval).
11.1 Entendendo a ordem de execução
console.log("Início");
setTimeout(() => {
console.log("Executou depois de 2 segundos");
}, 2000);
console.log("Fim");Saída esperada:
InícioFimExecutou depois de 2 segundos
11.2 Promises
Promise representa um resultado futuro: pendente, resolvido ou rejeitado.
function buscarDados() {
return new Promise((resolve) => {
setTimeout(() => resolve("Dados carregados"), 1000);
});
}
buscarDados().then((mensagem) => console.log(mensagem));Com erro:
function validarIdade(idade) {
return new Promise((resolve, reject) => {
if (idade >= 18) resolve("Acesso liberado");
else reject(new Error("Acesso negado"));
});
}11.3 async/await
async e await deixam o código assíncrono mais legível.
async function executar() {
const resposta = await buscarDados();
console.log(resposta);
}
executar();11.4 Tratamento de erros com try/catch
async function testarIdade() {
try {
const msg = await validarIdade(16);
console.log(msg);
} catch (erro) {
console.error("Erro:", erro.message);
}
}
testarIdade();11.5 Consumindo API com fetch
async function carregarUsuarios() {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const usuarios = await response.json();
console.log(usuarios);
}
carregarUsuarios();11.6 Verificando status HTTP
async function buscarPost(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (!response.ok) {
throw new Error(`Falha HTTP: ${response.status}`);
}
return response.json();
}11.7 Exemplo prático: previsão do tempo
Fluxo comum:
- usuário escolhe cidade;
- aplicação chama API;
- mostra temperatura e condição do clima;
- em erro, exibe mensagem amigável.
async function carregarClima(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Não foi possível buscar o clima");
}
const dados = await response.json();
console.log(dados);
} catch (erro) {
console.error("Erro ao carregar clima:", erro.message);
}
}11.8 Exercícios
- Faça uma função assíncrona que aguarde 3 segundos e retorne mensagem.
- Consuma uma API pública e mostre apenas os nomes retornados.
- Trate erros com
try/catchnofetch. - Crie função que busque um post por ID e valide status da resposta.
- Desafio: montar tela com busca e carregamento (
loading) para uma API.