Promise.then() vs async/await: Entenda a Diferença

Qual a diferença entre Promise.then() e async/await?

Em JavaScript, tanto Promise.then() quanto async/await são usados para trabalhar com código assíncrono. Ambos têm o objetivo de tornar o código mais legível e fácil de entender, mas cada um tem suas particularidades e casos de uso. Neste tutorial, vamos comparar os dois e explorar quando é melhor usar cada um.

O que é Promise.then()?

O método then() é um dos principais meios de trabalhar com Promises em JavaScript. Quando você chama then() em uma Promise, você está registrando uma função de callback que será executada quando a Promise for resolvida ou rejeitada. O then() permite que você encadeie múltiplas operações assíncronas, cada uma sendo executada na sequência.

Exemplo básico de uso de Promise.then():

let minhaPromise = new Promise(function(resolve, reject) {
  let sucesso = true;
  if (sucesso) {
    resolve('A operação foi bem-sucedida!');
  } else {
    reject('A operação falhou!');
  }
});

minhaPromise.then(function(result) {
  console.log(result);  // 'A operação foi bem-sucedida!'
}).catch(function(error) {
  console.log(error);  // 'A operação falhou!'
});

Aqui, a função then() é usada para lidar com o caso de sucesso da Promise. Caso a Promise seja rejeitada, o erro será capturado no catch().

O que é async/await?

async/await é uma forma mais moderna e simples de lidar com código assíncrono em JavaScript. async é usado para declarar uma função assíncrona e await é utilizado dentro dessa função para esperar que uma Promise seja resolvida antes de prosseguir com o código subsequente. Ao contrário de then(), o uso de async/await torna o código mais parecido com código síncrono, o que o torna mais fácil de ler e entender.

Exemplo básico de uso de async/await:

async function minhaFuncao() {
  let resultado = await minhaPromise;
  console.log(resultado);  // 'A operação foi bem-sucedida!'
}

minhaFuncao();

Neste exemplo, a função minhaFuncao é declarada como async, e o await faz com que o código espere que a Promise seja resolvida antes de prosseguir. Isso resulta em um código mais linear e fácil de seguir.

Principais Diferenças

Embora ambos os métodos, then() e async/await, sirvam ao mesmo propósito de manipular Promises e código assíncrono, existem algumas diferenças-chave entre eles:

• Sintaxe: async/await permite um estilo mais limpo e legível, sem a necessidade de aninhar funções. O código se assemelha mais a código síncrono, o que facilita a leitura e depuração.
• Encadeamento: then() é melhor quando você precisa encadear várias operações assíncronas em sequência, mas pode resultar em um código mais difícil de ler com muitos encadeamentos. Com async/await, o código fica mais linear e fácil de seguir, especialmente quando há várias Promises.
• Tratamento de erros: Em then(), você usa .catch() para tratar erros. Já com async/await, você pode usar try/catch, o que é mais intuitivo, especialmente em casos de múltiplos erros dentro de uma função assíncrona.

Quando usar Promise.then()?

Embora async/await seja frequentemente a escolha preferida para escrever código assíncrono, then() ainda pode ser útil em algumas situações:

• Quando você está trabalhando com código legado que já usa Promises.
• Quando você deseja usar Promise.all() ou Promise.race(), pois esses métodos retornam Promises e são frequentemente usados em conjunto com then().

Exemplo de uso de Promise.all() com then():

let promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Primeiro resultado'));
let promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'Segundo resultado'));

Promise.all([promise1, promise2]).then(function(results) {
  console.log(results);  // ['Primeiro resultado', 'Segundo resultado']
});

Quando usar async/await?

async/await é a escolha ideal quando você está escrevendo código assíncrono de forma sequencial, pois ele torna o fluxo de execução mais claro e legível. Use async/await quando:

• Você deseja escrever código assíncrono de forma mais legível e intuitiva.
• Você está lidando com operações assíncronas complexas, onde várias Promises precisam ser resolvidas em sequência.

Exemplo de uso de async/await para encadear Promises:

async function executarOperacoes() {
  try {
    let resultado1 = await operacao1();
    let resultado2 = await operacao2(resultado1);
    console.log(resultado1, resultado2);
  } catch (error) {
    console.log('Erro:', error);
  }
}

async function operacao1() {
  return 'Primeiro resultado';
}

async function operacao2(result) {
  return result + ' + Segundo resultado';
}

executarOperacoes();

Conclusão

Ambos Promise.then() e async/await são métodos essenciais para trabalhar com código assíncrono em JavaScript, mas cada um tem suas vantagens e casos de uso. O then() é útil para encadear Promises, mas pode se tornar complexo com muitos encadeamentos. O async/await, por outro lado, oferece um estilo mais limpo e legível, especialmente quando se trabalha com várias operações assíncronas sequenciais. Saber quando usar cada um pode ajudá-lo a escrever código assíncrono mais eficiente e fácil de manter.

Escolhendo entre Promise.then() e async/await para seu código assíncrono

Embora Promise.then() tenha sido a maneira principal de lidar com código assíncrono em JavaScript, a introdução de async/await trouxe uma forma mais limpa e intuitiva de escrever código assíncrono. O principal benefício de async/await é que ele torna o código assíncrono mais semelhante ao síncrono, facilitando o controle de fluxo e a leitura do código. No entanto, ambos têm seu lugar dependendo da situação e da necessidade.

Algumas aplicações:

• Usar async/await quando você deseja escrever código assíncrono que se assemelha ao fluxo síncrono, tornando-o mais fácil de ler e entender.
• Usar then() para encadear operações assíncronas de maneira simples, especialmente quando lidando com múltiplas Promises.
• Combinar async/await com Promise.all() ou Promise.race() para operações paralelas e de controle de fluxo.

Dicas para quem está começando

• Experimente começar com async/await para entender a simplicidade e clareza que ele traz para o código assíncrono.
• Se você está trabalhando com Promises mais simples, pode usar then() para evitar complexidade.
• Use try/catch para tratar erros com async/await, o que é mais fácil de gerenciar do que múltiplos .catch().
• Não se esqueça de que async/await deve ser usado dentro de funções declaradas com async.

Contribuições de

Andressa Maria

Desenvolvedora sênior com forte atuação em PHP, JavaScript e tecnologias de backend.

Mais sobre o autor

Compartilhe este tutorial