Assíncrono

Quase tudo que sai do navegador demora: buscar dados numa API, enviar um formulário, subir uma imagem. Assíncrono é o jeito do JavaScript lidar com isso sem congelar a página.

async function carregarProdutos() {
  const resposta = await fetch("/api/produtos");
  const produtos = await resposta.json();
  return produtos;
}

await quer dizer "espera essa parte terminar antes de seguir". async marca a função que tem espera dentro.

Promise

Uma promise é a promessa de um valor que ainda não chegou. Ela tem três situações possíveis: pendente, cumprida ou rejeitada. E é exatamente esse trio que aparece na sua tela como carregando, sucesso e erro.

try {
  const produtos = await carregarProdutos();
} catch (erro) {
  // aqui mora a tela de erro
}

O que isso te obriga a desenhar

Toda espera precisa de resposta visual. Se o botão de salvar não muda ao ser clicado, a pessoa clica de novo. Se a lista aparece do nada depois de dois segundos de tela branca, parece bug.

Skeleton, spinner, botão desabilitado com "Salvando..." e mensagem de erro com o que fazer em seguida não são enfeite. São a interface do tempo passando, e ninguém além de você vai desenhar isso.