Qual a diferença de Encadeamento de Promises e Aync/await

Hoje me deparei com a minha própria ignorância sobre a diferença entre essas duas formas de lidar com operações assíncronas, então decidi ler e pesquisar para escrever esse post — como um lembrete para mim e, quem sabe, ajudar outros desenvolvedores a entender melhor essa diferença.

Na época, eu sabia mais ou menos explicar que ambas fazem a mesma coisa, com o then() trazendo os dados resolvidos, enquanto resolve e reject eram usados para finalizar com sucesso ou erro. Já o async/await tinha o await para esperar o resultado antes de seguir para o próximo passo. Não estava completamente errado, mas dava para explicar de uma forma bem melhor.

Promise

A Promise, como o nome sugere, é uma "promessa" de retorno de dados que passa por três estados principais:

1. Pending: Estado inicial, quando a promessa ainda não foi resolvida ou rejeitada.
2. Fulfilled: A operação foi concluída com sucesso.
3. Rejected: A operação falhou e o erro foi capturado.

const minhaPromise = new Promise((resolve, reject) => {
  let sucesso = true; // Apenas um exemplo condicional

  if (sucesso) {
    resolve("Operação concluída com sucesso!");
  } else {
    reject("Ocorreu um erro na operação.");
  }
});

Encadeamento de Promises

Essa era a forma mais comum de lidar com Promises antes do async/await. Usamos os métodos then(), catch() e finally().

• then(): Usado para receber e manipular o dado resolvido com sucesso.
• catch(): Usado para lidar com o erro quando a promessa é rejeitada.
• finally(): Usado para executar um código independente do resultado.

minhaPromise
  .then((mensagem) => {
    console.log(mensagem); // "Operação concluída com sucesso!"
  })
  .catch((erro) => {
    console.error(erro); // Se der erro, isso será executado.
  })
  .finally(() => {
    console.log("Finalizando a execução da Promise"); // Sempre será executado.
  });

Async/Await

Uma função marcada como async retorna automaticamente uma Promise, e o await é usado para "pausar" a execução até que a Promise seja resolvida.

async function buscarDados() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Dados recebidos:", data);
  } catch (error) {
    console.error("Erro ao buscar dados:", error);
  }
}

buscarDados();

A Diferença

O encadeamento de Promises pode fazer com que o código fique muito aninhado, especialmente quando usamos vários then() seguidos, tornando a leitura mais difícil.

Já o async/await permite escrever código assíncrono de uma maneira mais parecida com o código síncrono, facilitando a leitura e a compreensão da lógica. O código fica mais limpo, especialmente quando precisamos lidar com várias operações assíncronas.

Além disso, a forma de tratar erros usando try/catch com async/await é mais intuitiva do que usar apenas o catch nas Promises.