11  Assincronismo e APIs

Nem toda tarefa no JavaScript termina imediatamente.
Chamamos isso de comportamento assíncrono.

Exemplos:

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:

  1. Início
  2. Fim
  3. Executou 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:

  1. usuário escolhe cidade;
  2. aplicação chama API;
  3. mostra temperatura e condição do clima;
  4. 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

  1. Faça uma função assíncrona que aguarde 3 segundos e retorne mensagem.
  2. Consuma uma API pública e mostre apenas os nomes retornados.
  3. Trate erros com try/catch no fetch.
  4. Crie função que busque um post por ID e valide status da resposta.
  5. Desafio: montar tela com busca e carregamento (loading) para uma API.