As Promises representam uma solução elegante para programação assíncrona em JavaScript. Basicamente, uma Promise é um objeto que encapsula o resultado de uma operação assíncronica que será concluída no futuro.
Do ponto de vista técnico, uma Promice é um objeto que nos permite obter informações sobre o status de uma operação assíncrona. Ela possui três estados possíveis:
pending(pendente): estado inicial, nem realizada nem rejeitadafulfilled(realizada): a operação foi concluída com sucessorejected(rejeitada): a operação falhou
O estado de uma Promise é imutável após a sua alteração - uma vez que se torna fulfilled ou rejected, não pode mais mudar. Essa transição é conhecida como resolved (resolvida).
Vale destacar algumas limitações das Promises:
- São imutáveis uma criadas, não podendo ser canceladas
- Erros internos não são propagados para o escopo externo sem tratamento adequado
- Quando no estado
pending, não é possível saber o progresso da operação
Utilização Básica
O construtor Promise cria uma nova instância e aceita duas funções como parâmetros: resolve e reject. A função resolve é chamada quando a operação assíncrona é bem-sucedida, enquanto reject é usada para indicar falha.
if (sucesso) {
resolve({ status: 'sucesso', dados: 'Operação concluída' });
} else {
reject(new Error('Falha na operação assíncrona'));
}
});
</div>Após criar uma Promise, podemos usar o método `then()` para definir callbacks que serão executados quando a Promise for resolvida ou rejeitada:
<div>```
minhaPromise
.then(resultado => {
console.log('Sucesso:', resultado.dados);
return 'Processamento adicional';
})
.catch(erro => {
console.error('Erro:', erro.message);
})
.finally(() => {
console.log('Operação finalizada');
});
console.log('Antes do then'); novaPromise.then(() => console.log('Callback then')); console.log('Depois do then'); // Saída esperada: // "Dentro da Promise" // "Antes do then" // "Depois do then" // "Callback then"
</div>Métodos do Protótipo Promise
----------------------------
### then()
O método `then()` permite ancadear múltiplos calllbacks. Se um callback retornar uma Promise, o próximo callback aguardará sua resolução:
<div>```
function buscarDados() {
return new Promise(resolve => {
setTimeout(() => resolve({ id: 1, nome: 'Exemplo' }), 1000);
});
}
function buscarRelacionado(dados) {
return new Promise(resolve => {
setTimeout(() => resolve({ ...dados, relacao: 'dados relacionados' }), 500);
});
}
buscarDados()
.then(buscarRelacionado)
.then(resultadoFinal => {
console.log('Resultado final:', resultadoFinal);
});
O método catch() é um atalho para then(null, rejection) e captura erros na cadeia de Promises:
promessaComErro .then(() => console.log('Nunca será executado')) .catch(erro => { console.error('Erro capturado:', erro.message); });
</div>### finally()
O método `finally()` executa independentemente do resultado da Promise, sendo útil para limpeza ou finalização:
<div>```
processarDados()
.then(resultado => console.log('Sucesso:', resultado))
.catch(erro => console.error('Falha:', erro))
.finally(() => console.log('Operação concluída'));
Promise.all() aguarda todas as Promises serem resolvidas:
Promise.all([promessa1, promessa2, promessa3]) .then(resultados => { console.log('Todas concluídas:', resultados); });
</div>`Promise.race()` resolve com o resultado da primeira Promise a ser concluída:
<div>```
Promise.race([promessa1, promessa2, promessa3])
.then(resultado => {
console.log('Primeiro a terminar:', resultado);
});
Promise.resolve() cria uma Promise já resolvida:
</div>`Promise.reject()` cria uma Promise já rejeitada:
<div>```
const promessaRejeitada = Promise.reject(new Error('Falha imediata'));
promessaRejeitada.catch(erro => console.error(erro.message)); // "Falha imediata"
Exemplo 1: Ordem de Execução
promessa.then(() => console.log(3));
console.log(4); // Saída: 1, 2, 4, 3
</div>### Exemplo 2: Estados Únicos
<div>```
const promessa = new Promise((resolve, reject) => {
resolve('sucesso1');
reject('erro');
resolve('sucesso2');
});
promessa
.then(res => console.log('then:', res))
.catch(err => console.log('catch:', err));
// Saída: "then: sucesso1"
</div></div>