Compreendendo promessas versus retornos de chamada em JavaScript

Principais perguntas e respostas para testes de certificação

1. O que é uma função de retorno de chamada e como ela difere de uma função normal?

   • Uma função de retorno de chamada é passada como argumento para outra função e é invocada para lidar com operações assíncronas. Ao contrário das funções regulares, os retornos de chamada são projetados para serem executados após a conclusão de uma determinada tarefa.

2. Como o Promises melhora a legibilidade do código e gerencia operações assíncronas em comparação com retornos de chamada?

   • As promessas permitem encadeamento e melhor tratamento de erros, levando a um código mais legível e de fácil manutenção. Eles ajudam a evitar estruturas profundamente aninhadas, conhecidas como "inferno de retorno de chamada".

3. Quais são os principais estados de uma promessa e como eles fazem a transição entre esses estados?

   • Os principais estados são: Pendente (estado inicial), Cumprido (operação concluída com sucesso) e Rejeitado (operação falhada). Uma promessa passa de Pendente para Cumprida ou Rejeitada.

4. Como você pode lidar com erros usando Promises e como isso se compara ao tratamento de erros com retornos de chamada?

   • As promessas fornecem um método catch para lidar com erros de maneira simplificada, enquanto o tratamento de erros com retornos de chamada geralmente requer a passagem de objetos de erro e várias verificações em retornos de chamada aninhados.

5. Qual é a diferença entre Promise.all e Promise.race e quando você usaria cada um?

   • Promise.all é resolvido quando todas as promessas de entrada são resolvidas, tornando-o útil para aguardar a conclusão de várias operações assíncronas. Promise.race é resolvido assim que uma das promessas de entrada é resolvida, útil para cenários em que o resultado da primeira operação concluída é necessário.

6. Como a sintaxe async/await simplifica o trabalho com Promises e quais são as regras para usar await?

   • A sintaxe async/await permite escrever código assíncrono de maneira síncrona, melhorando a legibilidade. await só pode ser usado dentro de funções assíncronas e pausa a execução até que a promessa seja resolvida.

Introdução

No cenário em evolução do JavaScript, o gerenciamento eficiente de operações assíncronas é fundamental para a criação de aplicativos Web de alto desempenho. Embora os retornos de chamada fossem a abordagem original, o Promises introduziu uma maneira mais estruturada e legível de lidar com tarefas assíncronas. Este blog investiga as complexidades do uso de promessas versus retornos de chamada, presumindo que você já tenha uma compreensão básica desses conceitos.

Benefícios das promessas em relação aos retornos de chamada

Melhor legibilidade e capacidade de manutenção

Os retornos de chamada, embora funcionais, geralmente levam a estruturas profundamente aninhadas, conhecidas como "inferno de retorno de chamada", tornando o código difícil de ler e manter.

Exemplo de inferno de retorno de chamada:

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

Melhorado com promessas:

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

Tratamento de erros

Com retornos de chamada, o tratamento de erros pode se tornar complicado, pois você precisa passar objetos de erro e tratá-los em cada nível.

Tratamento de erros com retornos de chamada:

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

Tratamento de erros com promessas:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Métodos avançados de promessa

Promessa.tudo

Promise.all é útil quando você precisa aguardar a conclusão de várias operações assíncronas antes de continuar.

Exemplo:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

Promessa.corrida

Promise.race é benéfico quando você precisa do resultado da operação mais rápida.

Exemplo:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

Simplificando código assíncrono com async/await

A sintaxe async/await permite que você escreva código assíncrono que parece síncrono, melhorando a legibilidade e reduzindo a complexidade do encadeamento de promessas.

Exemplo:

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

Conclusão

Embora os retornos de chamada tenham estabelecido as bases para o tratamento de operações assíncronas em JavaScript, o Promises melhorou significativamente a legibilidade, a capacidade de manutenção e os recursos de tratamento de erros do código assíncrono. Compreender como e quando usar essas ferramentas de forma eficaz é crucial para o desenvolvimento moderno de JavaScript. Com Promises e a sintaxe async/await, os desenvolvedores podem escrever códigos mais limpos e gerenciáveis, abrindo caminho para aplicativos mais robustos.