Promises vs. Callbacks: Qual a Melhor Abordagem em JavaScript?

O que são Promises no JavaScript

Promises são uma forma moderna e elegante de lidar com operações assíncronas no JavaScript. Elas representam um valor que pode estar disponível agora, no futuro ou nunca. Em vez de passar funções callback para lidar com resultados assíncronos, você pode usar métodos .then(), .catch(), e .finally() para encadear ações de maneira mais legível.

const minhaPromise = new Promise((resolve, reject) => {
setTimeout(() => {
  resolve('Operação concluída com sucesso!');
}, 2000);
});

minhaPromise.then(resultado => {
console.log(resultado); // 'Operação concluída com sucesso!'
}).catch(erro => {
console.error(erro);
});

O que são Callbacks no JavaScript

Callbacks são funções passadas como argumentos para outras funções, sendo chamadas quando a operação assíncrona é concluída. Embora eficazes, elas podem levar ao famoso "callback hell" quando há muitas operações aninhadas, tornando o código difícil de ler e manter.

function operacaoAssincrona(callback) {
setTimeout(() => {
  callback(null, 'Operação concluída com sucesso!');
}, 2000);
}

operacaoAssincrona((erro, resultado) => {
if (erro) {
  console.error(erro);
} else {
  console.log(resultado); // 'Operação concluída com sucesso!'
}
});

Comparativo das Abordagens

Vamos resolver um problema simples usando ambas as abordagens para destacar as diferenças. Suponha que precisamos buscar dados de um servidor e depois processá-los.

Com Callbacks:

function buscarDados(callback) {
setTimeout(() => {
  callback(null, 'Dados recebidos');
}, 1000);
}

function processarDados(dados, callback) {
setTimeout(() => {
  callback(null, `Dados processados: ${dados}`);
}, 1000);
}

buscarDados((erro, dados) => {
if (erro) {
  console.error(erro);
} else {
  processarDados(dados, (erro, resultado) => {
    if (erro) {
      console.error(erro);
    } else {
      console.log(resultado); // 'Dados processados: Dados recebidos'
    }
  });
}
});

Explicação:

Funções de callback: buscarDados e processarDados recebem uma função de callback que será chamada após um tempo simulado (usando setTimeout).

Erro e Dados: O callback recebe dois parâmetros: erro (para tratar erros) e dados (para passar os dados processados).

Chamada aninhada: buscarDados é chamado e, no callback, chama processarDados, que também usa um callback para retornar os resultados processados.

Vantagens e Desvantagens:

Vantagem: Simplicidade e controle direto sobre o fluxo de execução.

Desvantagem:

Callback Hell: O aninhamento de callbacks pode levar a um código difícil de ler e manter, especialmente quando há várias operações assíncronas.

Com Promises:

function buscarDados() {
return new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Dados recebidos');
  }, 1000);
});
}

function processarDados(dados) {
return new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(`Dados processados: ${dados}`);
  }, 1000);
});
}

buscarDados()
.then(dados => processarDados(dados))
.then(resultado => {
  console.log(resultado); // 'Dados processados: Dados recebidos'
})
.catch(erro => {
  console.error(erro);
});

Explicação:

Promises: buscarDados e processarDados retornam Promises, que representam uma operação assíncrona que pode ser resolvida (resolve) ou rejeitada (reject). Encadeamento de Promises: Usamos .then() para lidar com a resolução das Promises e .catch() para lidar com erros.

Retorno de dados: Quando a Promise é resolvida, o valor é passado para a próxima .then().

Vantagens e Desvantagens:

Vantagens:

Leitura e manutenção: O código é mais linear e fácil de ler, evitando o Callback Hell. Encadeamento: Permite encadear operações assíncronas de maneira mais clara. Tratamento de erros: Centraliza o tratamento de erros com .catch(), simplificando a gestão de erros.

Desvantagem: Leve curva de aprendizado para aqueles que não estão familiarizados com Promises.

Quando usar cada abordagem:

Callbacks: Projetos simples ou legados que já utilizam essa abordagem. Situações onde um controle muito direto e imediato sobre o fluxo assíncrono é necessário.

Promises: Projetos modernos ou quando se deseja um código mais legível e fácil de manter. Quando se espera encadear várias operações assíncronas. Quando se integra com async/await para uma sintaxe ainda mais limpa e sincrônica.

Em resumo, enquanto callbacks podem ser suficientes para operações assíncronas simples, Promises proporcionam uma maneira mais elegante e robusta de lidar com código assíncrono, especialmente em aplicações mais complexas.

Conclusão

Gostou do conteúdo?

Capa criada com imagens geradas por IA: lexica.art.

Conteúdo criado com IA: ChatGPT, porém revisado por humano.

Me siga no LinkedIn.

#JavaScript #PromisesVsCallbacks #DevTips