JavaScript Assíncrono: Async, Await e Promises

JavaScript 27 de Dez de 2023

*Texto de Paulo Clemente
Desenvolvedor e redator de mídias sociais na Rocketseat

O JavaScript é uma linguagem poderosa e versátil, utilizada tanto no desenvolvimento front-end quanto back-end. Um dos seus aspectos mais intrigantes é a capacidade de executar operações assíncronas, essenciais para criar aplicações web modernas e responsivas.

Neste artigo, exploraremos os conceitos de Promises, Async e Await e como eles transformaram a forma de escrever código assíncrono em JavaScript.

Entendendo Promises

Promises são objetos que representam o resultado eventual de uma operação assíncrona. Elas podem estar em três estados: pendente, resolvida ou rejeitada.

Uma Promise proporciona uma maneira de lidar com operações que levam tempo para serem concluídas, como solicitações de rede ou leitura de arquivos.

Como funcionam

Uma Promise inicia no estado pendente e, eventualmente, se resolve (sucesso) ou rejeita (erro). Isso permite que o código continue sua execução sem bloquear, enquanto espera o resultado da Promise. Com isso, melhora-se a performance e a experiência do usuário em aplicações web.

Async e Await

O que são Async e Await

Async e Await são extensões das Promises, introduzidas para simplificar a escrita de código assíncrono. Uma função marcada como async retorna uma Promise, e a palavra-chave await é usada para esperar de forma síncrona o resultado de uma Promise, tornando o código mais legível e fácil de manter.

Benefícios sobre o uso de Promises

O uso de async e await torna o código mais claro, especialmente em cadeias complexas de Promises. Evita-se o “callback hell” e torna-se mais fácil rastrear e tratar erros.

Exemplos Práticos com Promises

Exemplo 1: Operações de Leitura de Arquivo

const fs = require('fs').promises;

fs.readFile('arquivo.txt', 'utf-8')
  .then(conteudo => console.log(conteudo))
  .catch(erro => console.error(erro));

Exemplo 2: Chamadas de API

fetch('<https://api.exemplo.com/dados>')
  .then(response => response.json())
  .then(dados => console.log(dados))
  .catch(erro => console.error(erro));

Exemplos Práticos com Async e Await

Exemplo 1: Manipulação de Dados

async function buscarDados() {
  try {
    const response = await fetch('<https://api.exemplo.com/dados>');
    const dados = await response.json();
    console.log(dados);
  } catch (erro) {
    console.error(erro);
  }
}

Exemplo 2: Processamento de várias Promises


async function processarPromises() {
  try {
    const [resultado1, resultado2] = await Promise.all([
      fetch('<https://api.exemplo1.com>'),
      fetch('<https://api.exemplo2.com>')
    ]);
    // processamento adicional aqui
  } catch (erro) {
    console.error(erro);
  }
}

Tratamento de Erros

Em Promises

No contexto das Promises, o tratamento de erros é realizado através do método .catch(), que captura qualquer erro que ocorra durante a execução da Promise.

Em Async e Await

No uso de async e await, os erros são tratados com blocos try/catch, proporcionando uma maneira mais direta e familiar de lidar com exceções.

Melhores Práticas e Padrões

Quando se trata de escrever código assíncrono, algumas práticas são essenciais para manter a qualidade e legibilidade. Isso inclui o uso adequado de async/await, a prevenção de “callback hell”, e a implementação eficiente de tratamento de erros.

Comparativo: Callbacks vs. Promises vs. Async/Await

Cada abordagem tem suas vantagens e desvantagens. Callbacks são simples, mas podem levar a um código difícil de ler e manter. Promises oferecem uma abordagem mais estruturada, mas ainda podem ser complexas em cadeias longas. Async/await traz uma sintaxe mais limpa e direta, facilitando o trabalho com operações assíncronas.

O JavaScript assíncrono, com suas Promises, Async e Await, é uma ferramenta essencial no arsenal de qualquer desenvolvedor web moderno. Entendê-lo e aplicá-lo corretamente pode fazer uma grande diferença na performance e na qualidade das aplicações web.

Perguntas que você precisa fazer sobre JavaScript Assíncrono:

Qual a principal vantagem de usar async/await em vez de Promises?

R. A principal vantagem é a legibilidade e simplicidade do código, tornando-o mais fácil de escrever e manter.

Como posso evitar o “callback hell” em JavaScript?

R. Utilizando Promises e a sintaxe async/await para estruturar melhor o código assíncrono.

É possível usar async/await com APIs antigas baseadas em callbacks?

R. Sim, é possível, mas pode requerer a conversão dos callbacks para Promises.

Como o JavaScript lida com operações assíncronas internamente?

R. O JavaScript utiliza um modelo de evento e loop de eventos para lidar com operações assíncronas, permitindo que o código continue executando enquanto espera por eventos.

Quais são algumas ferramentas úteis para trabalhar com JavaScript assíncrono?

R. Ferramentas como Node.js, frameworks como React e Angular, e recursos de desenvolvedor nos navegadores modernos são muito úteis.