Você já se deparou com um código JavaScript que parecia uma escada deitada? Aquele aninhamento infinito de callbacks que faz você questionar suas escolhas de carreira? Se você já teve pesadelos com código que parece uma pirâmide egípcia virada de lado, este artigo é para você. Hoje, vou compartilhar **Promises e Async/Await** - as ferramentas que literalmente salvaram minha sanidade mental ao trabalhar com código assíncrono. Ao final deste artigo, você entenderá como transformar callback hell em código limpo, como encadear operações assíncronas elegantemente, e quando usar cada abordagem. ## O Que São Promises? Promises são objetos que representam a eventual conclusão (ou falha) de uma operação assíncrona. É como pedir comida por delivery: você recebe uma promessa de que sua comida chegará, e então você pode planejar o que fazer quando ela chegar (ou se algo der errado). ### Por Que Isso Importa Antes de mergulhar na implementação, vamos entender o problema que estamos resolvendo: ```javascript // ❌ Sem Promises - o temido callback hell getUserData(userId, (userData) => { getOrders(userData.id, (orders) => { getOrderDetails(orders[0].id, (details) => { calculateTotal(details, (total) => { applyDiscount(total, userData.vipLevel, (finalPrice) => { console.log(`Preço final: ${finalPrice}`); // E se precisarmos adicionar mais uma operação? 😱 }); }); }); }); }); // ✅ Com Promises - fluxo linear e legível getUserData(userId) .then(userData => getOrders(userData.id)) .then(orders => getOrderDetails(orders[0].id)) .then(details => calculateTotal(details)) .then(total => applyDiscount(total, userData.vipLevel)) .then(finalPrice => console.log(`Preço final: ${finalPrice}`)) .catch(error => console.error('Erro no processamento:', error)); ``` A diferença é gritante! O código com Promises é linear, fácil de ler e muito mais fácil de manter. Cada operação está claramente separada, e o tratamento de erros é centralizado. ## Quando Você Deve Usar Promises? **Bons casos de uso:** - Requisições HTTP para APIs externas - Operações de leitura/escrita em arquivos - Queries em bancos de dados - Qualquer operação que não retorne um resultado imediatamente **Quando NÃO usar Promises:** - Operações síncronas simples (não há necessidade de complicar) - Quando você precisa de callbacks por questões de compatibilidade - Em loops que precisam processar itens sequencialmente (use async/await) ## Promises: Construindo Sua Primeira Implementação Vamos construir isso passo a passo. Vou mostrar como cada peça funciona e por que cada decisão importa. ### Passo 1: Criando uma Promise Básica Primeiro, vamos entender como criar e usar uma Promise do zero: #### Anatomia de uma Promise ```javascript // Criando uma Promise básica const minhaPromise = new Promise((resolve, reject) => { // resolve: função para quando tudo dá certo // reject: função para quando algo dá errado const sucesso = true; if (sucesso) { resolve("Operação concluída com sucesso!"); } else { reject("Algo deu errado!"); } }); // Consumindo a Promise minhaPromise .then(resultado => console.log(resultado)) .catch(erro => console.error(erro)); ``` **Como encontrar o momento certo para resolver/rejeitar:** - Use `resolve()` quando a operação for bem-sucedida - Use `reject()` quando houver um erro - Sempre forneça valores significativos para debug ```javascript // Exemplo prático: simulando uma requisição de API function buscarUsuario(id) { return new Promise((resolve, reject) => { // Simulando delay de rede setTimeout(() => { const usuarios = { 1: { nome: "João", email: "joao@email.com" }, 2: { nome: "Maria", email: "maria@email.com" } }; const usuario = usuarios[id]; if (usuario) { resolve(usuario); // Sucesso: retorna o usuário } else { reject(new Error(`Usuário com ID ${id} não encontrado`)); // Erro detalhado } }, 1000); }); } ``` **Por que essa configuração funciona tão bem:** - **Clareza:** O código expressa claramente a intenção - **Controle de fluxo:** Você decide exatamente quando resolver ou rejeitar - **Tratamento de erros:** Erros são propagados automaticamente ### Passo 2: Encadeamento de Promises Agora vamos construir a funcionalidade principal: o encadeamento. #### 2.1: Estrutura Básica do Encadeamento Primeiro, vamos criar a estrutura básica: ```javascript // Funções que retornam Promises function obterPerfil(userId) { return new Promise((resolve) => { setTimeout(() => { resolve({ id: userId, nome: "Ana", nivel: "premium" }); }, 500); }); } function obterHistorico(perfil) { return new Promise((resolve) => { setTimeout(() => { resolve({ usuario: perfil.nome, compras: 15, totalGasto: 1500 }); }, 500); }); } ``` #### 2.2: Implementando o Encadeamento Vamos implementar o encadeamento, explicando cada decisão: ```javascript // Encadeamento elegante de Promises obterPerfil(123) .then(perfil => { console.log(`Processando perfil de ${perfil.nome}`); // IMPORTANTE: retornar uma Promise permite continuar o encadeamento return obterHistorico(perfil); }) .then(historico => { console.log(`Total de compras: ${historico.compras}`); // Podemos retornar valores simples também return historico.totalGasto * 0.1; // 10% de cashback }) .then(cashback => { console.log(`Cashback calculado: R$ ${cashback}`); }) .catch(erro => { // Qualquer erro em qualquer ponto cai aqui console.error("Erro no processamento:", erro); }); ``` **Por que essa implementação?** - **Fluxo linear:** Cada `then` processa o resultado do anterior - **Flexibilidade:** Podemos retornar Promises ou valores simples - **Tratamento centralizado:** Um único `catch` pega todos os erros #### 2.3: Promise.all - Operações Paralelas Agora vamos adicionar processamento paralelo: ```javascript // Quando precisamos de múltiplos dados ao mesmo tempo function carregarDashboard(userId) { // Todas as Promises executam em paralelo return Promise.all([ obterPerfil(userId), obterPedidosRecentes(userId), obterNotificacoes(userId), obterRecomendacoes(userId) ]).then(([perfil, pedidos, notificacoes, recomendacoes]) => { // Todos os dados chegam juntos return { usuario: perfil.nome, pedidosAtivos: pedidos.length, notificacoesNaoLidas: notificacoes.filter(n => !n.lida).length, produtosRecomendados: recomendacoes }; }); } ``` **Diferenças importantes:** - **Performance:** Operações executam simultaneamente, não sequencialmente - **Tudo ou nada:** Se uma Promise falhar, toda a operação falha #### 2.4: Promise.race - Primeira Resposta Vence ```javascript // Útil para timeouts e fallbacks function buscarComTimeout(url, tempoLimite = 5000) { const promiseBusca = fetch(url); const promiseTimeout = new Promise((_, reject) => { setTimeout(() => reject(new Error('Timeout!')), tempoLimite); }); // Retorna a primeira que resolver (ou rejeitar) return Promise.race([promiseBusca, promiseTimeout]); } ``` **Promise.race explicada:** - Retorna assim que a primeira Promise é resolvida - Útil para implementar timeouts - Perfeita para cenários de fallback ### Passo 3: Async/Await - A Evolução Natural ```javascript // Transformando Promises em código "síncrono" async function processarPedido(userId, pedidoId) { try { // await pausa a execução até a Promise resolver const usuario = await obterUsuario(userId); const pedido = await obterPedido(pedidoId); const estoque = await verificarEstoque(pedido.items); if (!estoque.disponivel) { throw new Error('Produto fora de estoque'); } const pagamento = await processarPagamento(usuario, pedido); const envio = await agendarEnvio(pedido, usuario.endereco); return { status: 'sucesso', numeroPedido: pedido.id, previsaoEntrega: envio.data }; } catch (erro) { console.error('Erro ao processar pedido:', erro); throw erro; // Re-lança o erro para o chamador tratar } } ``` O async/await transforma código assíncrono em algo que parece síncrono, tornando muito mais fácil de ler e entender o fluxo de execução. ## Um Exemplo Mais Complexo: Sistema de Processamento de Pedidos Vamos construir algo mais realista - um sistema completo de processamento de pedidos que demonstra o uso avançado de Promises e async/await: ### Entendendo o Problema Antes de mergulhar no código, vamos entender o que estamos construindo: ```javascript // ❌ Abordagem ingênua - por que isso não funciona bem async function processarPedidosIngenuamente(pedidos) { const resultados = []; // Processa um por vez - MUITO lento! for (const pedido of pedidos) { const resultado = await processarPedidoCompleto(pedido); resultados.push(resultado); } return resultados; } // ✅ Nossa abordagem melhorada - o que vamos construir async function processarPedidosOtimizado(pedidos) { // Processa em lotes com controle de concorrência // Tratamento de erros granular // Retry automático para falhas temporárias } ``` ### Implementação Passo a Passo #### Fase 1: Sistema de Retry Inteligente ```javascript // Implementação robusta com retry exponencial async function executarComRetry( funcao, tentativas = 3, delayInicial = 1000 ) { let ultimoErro; for (let tentativa = 1; tentativa <= tentativas; tentativa++) { try { // Tenta executar a função return await funcao(); } catch (erro) { ultimoErro = erro; console.log(`Tentativa ${tentativa} falhou:`, erro.message); if (tentativa < tentativas) { // Delay exponencial: 1s, 2s, 4s... const delay = delayInicial * Math.pow(2, tentativa - 1); console.log(`Aguardando ${delay}ms antes da próxima tentativa...`); await new Promise(resolve => setTimeout(resolve, delay)); } } } throw new Error(`Falhou após ${tentativas} tentativas: ${ultimoErro.message}`); } // Uso prático const resultado = await executarComRetry( () => fetch('https://api.exemplo.com/pedido'), 3, // máximo de tentativas 500 // delay inicial de 500ms ); ``` **Detalhando o conceito:** - **Retry exponencial:** Aumenta o tempo entre tentativas - **Limite de tentativas:** Evita loops infinitos - **Logging detalhado:** Facilita o debug em produção #### Fase 2: Processamento em Lote com Controle ```javascript // Processa pedidos em lotes controlados async function processarEmLotes(pedidos, tamanhoLote = 5) { const resultados = []; // Divide os pedidos em lotes for (let i = 0; i < pedidos.length; i += tamanhoLote) { const lote = pedidos.slice(i, i + tamanhoLote); console.log(`Processando lote ${Math.floor(i/tamanhoLote) + 1} de ${Math.ceil(pedidos.length/tamanhoLote)}`); // Processa o lote em paralelo const resultadosLote = await Promise.allSettled( lote.map(pedido => processarPedidoComRetry(pedido)) ); // Separa sucessos e falhas resultadosLote.forEach((resultado, index) => { if (resultado.status === 'fulfilled') { resultados.push({ pedidoId: lote[index].id, status: 'sucesso', dados: resultado.value }); } else { resultados.push({ pedidoId: lote[index].id, status: 'falha', erro: resultado.reason.message }); } }); // Pequena pausa entre lotes para não sobrecarregar if (i + tamanhoLote < pedidos.length) { await new Promise(resolve => setTimeout(resolve, 100)); } } return resultados; } // Função auxiliar que combina processamento com retry async function processarPedidoComRetry(pedido) { return executarComRetry( async () => { const validacao = await validarPedido(pedido); if (!validacao.valido) { throw new Error(`Pedido inválido: ${validacao.motivo}`); } const estoque = await verificarEstoque(pedido.items); const preco = await calcularPrecoFinal(pedido, estoque); const pagamento = await processarPagamento(pedido, preco); return { pedidoId: pedido.id, valorFinal: preco, transacaoId: pagamento.id }; }, 3, // tentativas 1000 // delay inicial ); } ``` **Por que processamento em lote funciona:** - Controla a carga no servidor - Permite processamento paralelo controlado - Facilita o monitoramento do progresso #### Fase 3: Sistema Completo com Monitoramento ```javascript // Sistema completo de processamento com métricas class ProcessadorPedidos { constructor(config = {}) { this.tamanhoLote = config.tamanhoLote || 5; this.maxTentativas = config.maxTentativas || 3; this.metricas = { total: 0, sucesso: 0, falha: 0, tempoTotal: 0 }; } async processar(pedidos) { console.log(`Iniciando processamento de ${pedidos.length} pedidos`); const inicio = Date.now(); this.metricas.total = pedidos.length; try { // Valida todos os pedidos primeiro const pedidosValidos = await this.validarPedidos(pedidos); // Processa em lotes const resultados = await this.processarEmLotes(pedidosValidos); // Atualiza métricas this.metricas.tempoTotal = Date.now() - inicio; this.metricas.sucesso = resultados.filter(r => r.status === 'sucesso').length; this.metricas.falha = resultados.filter(r => r.status === 'falha').length; // Gera relatório this.gerarRelatorio(); return resultados; } catch (erro) { console.error('Erro fatal no processamento:', erro); throw erro; } } async validarPedidos(pedidos) { // Validação paralela de todos os pedidos const validacoes = await Promise.allSettled( pedidos.map(pedido => this.validarPedido(pedido)) ); return pedidos.filter((pedido, index) => validacoes[index].status === 'fulfilled' && validacoes[index].value.valido ); } async validarPedido(pedido) { // Validações assíncronas const [clienteValido, itensDisponiveis] = await Promise.all([ this.validarCliente(pedido.clienteId), this.validarItens(pedido.items) ]); return { valido: clienteValido && itensDisponiveis, pedidoId: pedido.id }; } gerarRelatorio() { console.log('\n=== Relatório de Processamento ==='); console.log(`Total de pedidos: ${this.metricas.total}`); console.log(`Sucesso: ${this.metricas.sucesso} (${(this.metricas.sucesso/this.metricas.total*100).toFixed(1)}%)`); console.log(`Falha: ${this.metricas.falha} (${(this.metricas.falha/this.metricas.total*100).toFixed(1)}%)`); console.log(`Tempo total: ${(this.metricas.tempoTotal/1000).toFixed(2)}s`); console.log(`Tempo médio por pedido: ${(this.metricas.tempoTotal/this.metricas.total).toFixed(0)}ms`); } } // Uso do sistema const processador = new ProcessadorPedidos({ tamanhoLote: 10, maxTentativas: 3 }); const resultados = await processador.processar(pedidos); ``` Este sistema completo demonstra como combinar todas as técnicas aprendidas em uma solução robusta e profissional. ## Padrão Avançado: Pipeline de Processamento com Controle de Fluxo Agora vamos explorar um padrão avançado que demonstra uso em nível de maestria. ### O Problema com Abordagens Simples ```javascript // ❌ Limitações da abordagem simples async function processarDadosSimples(dados) { const resultados = []; for (const item of dados) { // Sem controle de concorrência // Sem tratamento de erros parciais // Sem possibilidade de cancelamento const resultado = await processar(item); resultados.push(resultado); } return resultados; } ``` **Por que isso se torna problemático:** - Não há controle sobre quantas operações executam simultaneamente - Um erro para todo o processamento - Impossível cancelar operações em andamento ### Construindo a Solução Avançada #### Estágio 1: Controle de Concorrência ```javascript // Classe para controlar concorrência class ControladorConcorrencia { constructor(limite = 5) { this.limite = limite; this.executando = 0; this.fila = []; } async executar(funcao) { // Se atingiu o limite, espera while (this.executando >= this.limite) { await new Promise(resolve => this.fila.push(resolve)); } this.executando++; try { return await funcao(); } finally { this.executando--; // Libera próximo da fila if (this.fila.length > 0) { const proximo = this.fila.shift(); proximo(); } } } } // Uso prático const controlador = new ControladorConcorrencia(3); const resultados = await Promise.all( dados.map(item => controlador.executar(() => processarItem(item)) ) ); ``` **Controle de concorrência - mergulho profundo:** - **O que faz:** Limita quantas operações executam simultaneamente - **Por que é poderoso:** Evita sobrecarga de recursos - **Quando usar:** APIs com rate limiting, operações pesadas #### Estágio 2: Pipeline com Transformações ```javascript // Pipeline avançado com múltiplas etapas class Pipeline { constructor() { this.etapas = []; this.cancelado = false; } adicionar(nome, funcao, config = {}) { this.etapas.push({ nome, funcao, paralelo: config.paralelo || 1, retry: config.retry || 0, timeout: config.timeout || 0 }); return this; // Permite encadeamento } async processar(dados) { let resultado = dados; for (const etapa of this.etapas) { if (this.cancelado) { throw new Error('Pipeline cancelado'); } console.log(`Executando etapa: ${etapa.nome}`); resultado = await this.executarEtapa(etapa, resultado); } return resultado; } async executarEtapa(etapa, dados) { const controlador = new ControladorConcorrencia(etapa.paralelo); const processar = async (item) => { // Adiciona timeout se configurado let promessa = etapa.funcao(item); if (etapa.timeout > 0) { promessa = Promise.race([ promessa, new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), etapa.timeout) ) ]); } // Adiciona retry se configurado if (etapa.retry > 0) { return executarComRetry(() => promessa, etapa.retry + 1); } return promessa; }; // Processa com controle de concorrência if (Array.isArray(dados)) { return Promise.all( dados.map(item => controlador.executar(() => processar(item))) ); } else { return processar(dados); } } cancelar() { this.cancelado = true; } } // Exemplo de uso const pipeline = new Pipeline() .adicionar('validacao', validarDados, { paralelo: 10 }) .adicionar('enriquecimento', enriquecerDados, { paralelo: 5, retry: 2 }) .adicionar('transformacao', transformarDados, { paralelo: 3 }) .adicionar('persistencia', salvarDados, { paralelo: 1, timeout: 5000 }); const resultado = await pipeline.processar(dadosEntrada); ``` **Padrões de integração:** - **Composição:** Cada etapa é independente e reutilizável - **Configuração flexível:** Cada etapa tem suas próprias regras #### Estágio 3: Implementação Completa com Observabilidade ```javascript // Sistema completo com métricas e observabilidade class PipelineAvancado extends Pipeline { constructor() { super(); this.metricas = new Map(); this.observers = []; } adicionarObserver(observer) { this.observers.push(observer); } notificar(evento, dados) { this.observers.forEach(obs => obs(evento, dados)); } async executarEtapa(etapa, dados) { const inicio = Date.now(); const metricaEtapa = { nome: etapa.nome, itensProcessados: 0, sucessos: 0, falhas: 0, tempoTotal: 0 }; try { this.notificar('etapa.inicio', { etapa: etapa.nome }); const resultado = await super.executarEtapa(etapa, dados); metricaEtapa.itensProcessados = Array.isArray(dados) ? dados.length : 1; metricaEtapa.sucessos = metricaEtapa.itensProcessados; metricaEtapa.tempoTotal = Date.now() - inicio; this.metricas.set(etapa.nome, metricaEtapa); this.notificar('etapa.sucesso', { etapa: etapa.nome, metricas: metricaEtapa }); return resultado; } catch (erro) { metricaEtapa.falhas = metricaEtapa.itensProcessados; metricaEtapa.tempoTotal = Date.now() - inicio; this.metricas.set(etapa.nome, metricaEtapa); this.notificar('etapa.erro', { etapa: etapa.nome, erro: erro.message }); throw erro; } } gerarRelatorioDetalhado() { console.log('\n=== Relatório Detalhado do Pipeline ==='); let tempoTotal = 0; let itensTotais = 0; this.metricas.forEach((metrica, nome) => { console.log(`\nEtapa: ${nome}`); console.log(` Itens: ${metrica.itensProcessados}`); console.log(` Sucessos: ${metrica.sucessos}`); console.log(` Falhas: ${metrica.falhas}`); console.log(` Tempo: ${(metrica.tempoTotal/1000).toFixed(2)}s`); console.log(` Velocidade: ${(metrica.itensProcessados/(metrica.tempoTotal/1000)).toFixed(1)} itens/s`); tempoTotal += metrica.tempoTotal; itensTotais = Math.max(itensTotais, metrica.itensProcessados); }); console.log(`\nTempo total do pipeline: ${(tempoTotal/1000).toFixed(2)}s`); console.log(`Taxa de processamento: ${(itensTotais/(tempoTotal/1000)).toFixed(1)} itens/s`); } } // Uso com observabilidade const pipeline = new PipelineAvancado(); // Adiciona logging pipeline.adicionarObserver((evento, dados) => { if (evento === 'etapa.inicio') { console.log(`[${new Date().toISOString()}] Iniciando ${dados.etapa}`); } else if (evento === 'etapa.erro') { console.error(`[${new Date().toISOString()}] Erro em ${dados.etapa}: ${dados.erro}`); } }); // Configura pipeline pipeline .adicionar('download', baixarDados, { paralelo: 10, timeout: 30000 }) .adicionar('processamento', processarDados, { paralelo: 5, retry: 2 }) .adicionar('upload', enviarResultados, { paralelo: 3, timeout: 60000 }); // Executa e gera relatório try { await pipeline.processar(dados); pipeline.gerarRelatorioDetalhado(); } catch (erro) { console.error('Pipeline falhou:', erro); pipeline.gerarRelatorioDetalhado(); } ``` **Por que essa arquitetura é poderosa:** - Visibilidade total do processamento - Métricas detalhadas para otimização - Facilita debug e manutenção ## Promises com TypeScript Para usuários TypeScript, aqui está como tornar tudo type-safe: ### Configurando Tipos ```typescript // types/async.ts interface Usuario { id: number; nome: string; email: string; nivel: 'basico' | 'premium' | 'vip'; } interface Pedido { id: string; usuarioId: number; items: ItemPedido[]; status: 'pendente' | 'processando' | 'concluido' | 'cancelado'; } interface ResultadoProcessamento { sucesso: boolean; dados?: T; erro?: Error; timestamp: Date; } // Tipo genérico para funções com retry type FuncaoComRetry = () => Promise; ``` **Benefícios da type safety:** - Autocomplete no IDE mostra exatamente o que está disponível - Erros de tipo são capturados em tempo de compilação ### Implementação com Tipagem Adequada ```typescript // Classe Pipeline totalmente tipada class PipelineTS { private etapas: EtapaPipeline[] = []; adicionar( nome: string, funcao: (dados: T) => Promise, config?: ConfigEtapa ): PipelineTS { this.etapas.push({ nome, funcao, config }); return this as any; // Type assertion para permitir encadeamento } async processar(dados: T): Promise { let resultado: any = dados; for (const etapa of this.etapas) { resultado = await this.executarEtapa(etapa, resultado); } return resultado; } } // Função com retry tipada async function executarComRetryTS( funcao: FuncaoComRetry, config: { tentativas?: number; delay?: number; onError?: (erro: Error, tentativa: number) => void; } = {} ): Promise { const { tentativas = 3, delay = 1000, onError } = config; let ultimoErro: Error; for (let i = 1; i <= tentativas; i++) { try { return await funcao(); } catch (erro) { ultimoErro = erro as Error; onError?.(ultimoErro, i); if (i < tentativas) { await new Promise(r => setTimeout(r, delay * i)); } } } throw ultimoErro!; } ``` ### Padrões TypeScript Avançados ```typescript // Tipos utilitários para async type AsyncFunction = () => Promise; type AsyncMapper = (item: T) => Promise; // Wrapper type-safe para Promise.allSettled async function processarComResultados( items: T[], processador: AsyncMapper ): Promise[]> { const resultados = await Promise.allSettled( items.map(item => processador(item)) ); return resultados.map((resultado, index) => ({ sucesso: resultado.status === 'fulfilled', dados: resultado.status === 'fulfilled' ? resultado.value : undefined, erro: resultado.status === 'rejected' ? resultado.reason : undefined, timestamp: new Date(), itemOriginal: items[index] })); } // Tipo para controle de concorrência interface ControleConcorrencia { executar(funcao: AsyncFunction): Promise; aguardarTodos(): Promise; cancelarTodos(): void; } // Implementação type-safe class ControladorConcorrenciaTS implements ControleConcorrencia { constructor(private limite: number) {} async executar(funcao: AsyncFunction): Promise { // Implementação com tipos garantidos return funcao(); } async aguardarTodos(): Promise { // Aguarda todas as operações pendentes } cancelarTodos(): void { // Cancela operações em andamento } } ``` ## Padrões Avançados e Melhores Práticas ### 1. Circuit Breaker para APIs **O que resolve:** Evita sobrecarregar APIs que estão falhando **Como funciona:** Interrompe temporariamente chamadas após múltiplas falhas ```javascript // Circuit Breaker implementation class CircuitBreaker { constructor(funcao, opcoes = {}) { this.funcao = funcao; this.falhasConsecutivas = 0; this.maxFalhas = opcoes.maxFalhas || 5; this.timeout = opcoes.timeout || 60000; // 1 minuto this.estado = 'FECHADO'; // FECHADO, ABERTO, MEIO_ABERTO this.proximaTentativa = null; } async executar(...args) { if (this.estado === 'ABERTO') { if (Date.now() < this.proximaTentativa) { throw new Error('Circuit breaker está aberto'); } // Tenta reabrir this.estado = 'MEIO_ABERTO'; } try { const resultado = await this.funcao(...args); this.onSucesso(); return resultado; } catch (erro) { this.onFalha(); throw erro; } } onSucesso() { this.falhasConsecutivas = 0; if (this.estado === 'MEIO_ABERTO') { this.estado = 'FECHADO'; } } onFalha() { this.falhasConsecutivas++; if (this.falhasConsecutivas >= this.maxFalhas) { this.estado = 'ABERTO'; this.proximaTentativa = Date.now() + this.timeout; console.log(`Circuit breaker aberto. Próxima tentativa em ${this.timeout}ms`); } } } // Uso const apiComCircuitBreaker = new CircuitBreaker( chamarAPI, { maxFalhas: 3, timeout: 30000 } ); try { const resultado = await apiComCircuitBreaker.executar(dados); } catch (erro) { console.error('API indisponível:', erro.message); } ``` **Quando usar:** APIs externas críticas que podem ficar instáveis ### 2. Debounce e Throttle Assíncronos **O problema:** Múltiplas chamadas desnecessárias para operações custosas **A solução:** Controlar a frequência de execução ```javascript // Debounce assíncrono - agrupa chamadas function debounceAsync(funcao, delay) { let timeoutId; let promessaPendente; return function(...args) { clearTimeout(timeoutId); if (!promessaPendente) { promessaPendente = new Promise((resolve, reject) => { timeoutId = setTimeout(async () => { try { const resultado = await funcao.apply(this, args); resolve(resultado); } catch (erro) { reject(erro); } finally { promessaPendente = null; } }, delay); }); } return promessaPendente; }; } // Throttle assíncrono - limita frequência function throttleAsync(funcao, limite) { let executando = false; let proximaExecucao = null; return async function(...args) { if (executando) { // Armazena para executar depois proximaExecucao = args; return; } executando = true; try { await funcao.apply(this, args); // Se há execução pendente, executa após o limite if (proximaExecucao) { const argsPendentes = proximaExecucao; proximaExecucao = null; setTimeout(() => { executando = false; return throttleAsync(funcao, limite).apply(this, argsPendentes); }, limite); } else { setTimeout(() => { executando = false; }, limite); } } catch (erro) { executando = false; throw erro; } }; } // Exemplo de uso const buscarComDebounce = debounceAsync( async (termo) => { const resposta = await fetch(`/api/buscar?q=${termo}`); return resposta.json(); }, 300 // Aguarda 300ms após última digitação ); // Múltiplas chamadas resultam em apenas uma requisição buscarComDebounce('Java'); buscarComDebounce('JavaS'); buscarComDebounce('JavaScript'); // Apenas esta executa ``` **Benefícios:** Reduz carga no servidor e melhora performance ### 3. Memoização de Promises **Contexto:** Evitar recálculos de operações custosas ```javascript // Cache inteligente para Promises class CachePromise { constructor(opcoes = {}) { this.cache = new Map(); this.ttl = opcoes.ttl || 5 * 60 * 1000; // 5 minutos padrão this.maxSize = opcoes.maxSize || 100; } async obter(chave, funcaoGeradora) { // Verifica cache existente if (this.cache.has(chave)) { const entrada = this.cache.get(chave); // Verifica se ainda é válido if (Date.now() - entrada.timestamp < this.ttl) { console.log(`Cache hit para: ${chave}`); return entrada.promessa; } // Remove entrada expirada this.cache.delete(chave); } // Limita tamanho do cache if (this.cache.size >= this.maxSize) { const primeiraChave = this.cache.keys().next().value; this.cache.delete(primeiraChave); } // Gera nova Promise e armazena console.log(`Cache miss para: ${chave}`); const promessa = funcaoGeradora(); this.cache.set(chave, { promessa, timestamp: Date.now() }); // Remove do cache se falhar promessa.catch(() => this.cache.delete(chave)); return promessa; } limpar() { this.cache.clear(); } } // Uso prático const cacheAPI = new CachePromise({ ttl: 60000 }); // 1 minuto async function obterDadosUsuario(userId) { return cacheAPI.obter( `usuario_${userId}`, async () => { const resposta = await fetch(`/api/usuarios/${userId}`); return resposta.json(); } ); } // Primeira chamada: busca da API const usuario1 = await obterDadosUsuario(123); // Segunda chamada (dentro de 1 minuto): retorna do cache const usuario2 = await obterDadosUsuario(123); ``` **Trade-offs:** Memória vs performance - use com dados que mudam pouco ### 4. Promise Pool com Prioridades **Caso de uso:** Processar tarefas com diferentes níveis de importância ```javascript // Pool de Promises com sistema de prioridades class PromisePool { constructor(concorrencia = 5) { this.concorrencia = concorrencia; this.executando = 0; this.filas = { alta: [], media: [], baixa: [] }; } async adicionar(funcao, prioridade = 'media') { return new Promise((resolve, reject) => { this.filas[prioridade].push({ funcao, resolve, reject }); this.processar(); }); } async processar() { if (this.executando >= this.concorrencia) { return; } // Pega próxima tarefa por prioridade let tarefa; if (this.filas.alta.length > 0) { tarefa = this.filas.alta.shift(); } else if (this.filas.media.length > 0) { tarefa = this.filas.media.shift(); } else if (this.filas.baixa.length > 0) { tarefa = this.filas.baixa.shift(); } if (!tarefa) return; this.executando++; try { const resultado = await tarefa.funcao(); tarefa.resolve(resultado); } catch (erro) { tarefa.reject(erro); } finally { this.executando--; this.processar(); // Processa próxima } } } // Exemplo de uso const pool = new PromisePool(3); // Máximo 3 simultâneas // Adiciona tarefas com diferentes prioridades await Promise.all([ pool.adicionar(() => processarCritico(), 'alta'), pool.adicionar(() => processarNormal(), 'media'), pool.adicionar(() => processarBackground(), 'baixa'), pool.adicionar(() => processarUrgente(), 'alta') ]); ``` ## Armadilhas Comuns a Evitar ### 1. Promise Constructor Anti-pattern **O problema:** Criar Promises desnecessariamente ```javascript // ❌ Não faça isso - Promise desnecessária function buscarDados() { return new Promise((resolve, reject) => { fetch('/api/dados') .then(response => response.json()) .then(data => resolve(data)) .catch(error => reject(error)); }); } // ✅ Faça isso - fetch já retorna uma Promise function buscarDados() { return fetch('/api/dados') .then(response => response.json()); } ``` **Por que isso importa:** Adiciona complexidade desnecessária e pode esconder erros ### 2. Esquecer de Retornar Promises **Erro comum:** Quebrar a cadeia de Promises ```javascript // ❌ Não faça isso - Promise não retornada promise .then(resultado => { processarResultado(resultado); // Esqueceu o return! }) .then(dadosProcessados => { console.log(dadosProcessados); // undefined! }); // ✅ Faça isso - sempre retorne Promises promise .then(resultado => { return processarResultado(resultado); // return explícito }) .then(dadosProcessados => { console.log(dadosProcessados); // Funciona corretamente }); ``` **Por que acontece:** JavaScript não exige return explícito, mas Promises precisam ### 3. Misturar Async/Await com .then() **A armadilha:** Código confuso e difícil de ler ```javascript // ❌ Evite misturar paradigmas - confuso async function processar() { const dados = await buscarDados(); return processarDados(dados) .then(resultado => transformar(resultado)) .then(async (transformado) => { const final = await finalizar(transformado); return final; }); } // ✅ Escolha um paradigma - clareza async function processar() { const dados = await buscarDados(); const processado = await processarDados(dados); const transformado = await transformar(processado); const final = await finalizar(transformado); return final; } ``` **Sinais de alerta:** Código que alterna entre async/await e .then() ## Quando NÃO Usar Promises Não use Promises quando: - **Operações síncronas simples:** Cálculos matemáticos, manipulação de strings - **Código legado com callbacks:** Quando a refatoração não vale o esforço - **Performance crítica:** Em hot paths onde microssegundos importam ```javascript // ❌ Overkill para cenários simples async function somar(a, b) { return new Promise(resolve => { resolve(a + b); }); } // ✅ Solução simples é melhor function somar(a, b) { return a + b; } ``` **Framework de decisão:** Use Promises apenas quando há real assincronicidade ## Promises vs Callbacks Tradicionais ### Quando Promises Brilham **Promises são ótimas para:** - **Composição:** Encadear múltiplas operações assíncronas facilmente - **Tratamento de erros:** Um único ponto para capturar todos os erros - **Legibilidade:** Código que se lê de cima para baixo ### Quando Considerar Alternativas **Considere alternativas quando precisar de:** - **Eventos múltiplos** → **EventEmitter:** Para streams de dados - **Compatibilidade** → **Callbacks:** Bibliotecas antigas - **Performance extrema** → **Callbacks diretos:** Menos overhead ### Matriz de Comparação | Característica | Promises | Callbacks | Observables | |----------------|----------|-----------|-------------| | Valores múltiplos | ❌ | ✅ | ✅ | | Cancelamento | ❌ | ✅ | ✅ | | Composição | ✅ | ❌ | ✅ | | Tratamento de erros | ✅ | ❌ | ✅ | ## Conclusão Promises e Async/Await são ferramentas fundamentais que transformam código assíncrono caótico em fluxos elegantes e manuteníveis. Elas trazem clareza, composição e tratamento robusto de erros para suas aplicações JavaScript. **Principais aprendizados:** - **Promises eliminam callback hell:** Transforme pirâmides de callbacks em código linear - **Async/await é açúcar sintático poderoso:** Escreva código assíncrono que parece síncrono - **Controle de fluxo é essencial:** Use Promise.all, Promise.race e padrões avançados - **Erros devem ser tratados adequadamente:** Um catch no lugar certo vale por mil try-catches Na próxima vez que você se deparar com código assíncrono complexo, lembre-se das técnicas que aprendemos. Seus colegas (e seu eu futuro) agradecerão o código limpo e manutenível. **Próximos passos:** - Refatore um callback hell em seu código atual usando Promises - Implemente um sistema de retry para suas chamadas de API - Experimente criar seu próprio pipeline de processamento Você já transformou callback hell em código elegante com Promises? Quais padrões você achou mais úteis? Compartilhe suas experiências nos comentários! --- *Se este artigo ajudou você a dominar programação assíncrona, siga para mais padrões avançados de JavaScript! 🚀* ## Recursos - [MDN - Promises](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [MDN - Async/Await](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function) - [JavaScript.info - Promises](https://javascript.info/promise-basics) - [Async JavaScript Patterns](https://www.patterns.dev/posts/async-javascript)

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Promises e Async/Await: O Guia Definitivo Que Acabará com o Callback Hell para Sempre