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.