O problema começa no facto de o 2
e o 4
serem escritos assincronamente, logo se deixar tudo rolar normalmente serão escritos no fim.
Começo por dizer que esse exemplo ainda é fazível sem Promises, mas não é uma solução escalável:
console.log("1");
setTimeout(() => {
console.log("2");
console.log("3");
setTimeout(() => console.log("4"),1000);
},1500);
Exemplo simples
Antes de começar com Promises tem de perceber para que servem e como se utilizam em cenários simples mesmo. Imagine que quer mostrar um numero na consola utilizando uma Promise e um setTimeout
para que a escrita seja temporizada.
Nesse caso poderia fazer assim:
const timer = new Promise((resolve, reject) => {
setTimeout(() => resolve(10), 1000);
});
timer.then(valor => console.log(valor));
Repare que a Promise recebe dois callbacks um de sucesso normalmente chamado de resolve
e um de erro normalmente chamado de reject
. Quando faz resolve
dentro da Promise está a executar a função recebida passando o valor de sucesso. Depois chamamos o .then
passando a função de sucesso que é:
valor => console.log(valor)
Que faz log do valor recebido. Optei por escrever com Arrow Function para ser mais simples e compacto, mas também pode ser escrito com função normal:
timer.then(function(valor){
console.log(valor);
});
O mesmo se aplica ao resto das funções no exemplo. Veja o mesmo exemplo totalmente sem Arrow Functions:
const timer = new Promise(function(resolve, reject){
setTimeout(function(){
resolve(10)
}, 1000);
});
timer.then(function(valor){
console.log(valor)
});
Encadeando Promisses
Um dos objetivos principais das Promises é conseguir encadear as várias chamadas com then
evitando o aninhamento. O aninhamento seria maior consoante a quantidade de coisas encadeadas que pretende fazer. Se algum erro surgir em algum dos promises no encadeamento ele será apanhado pelo catch
.
Veja o primeiro exemplo rescrito com Promises:
const timer2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("2"),1500);
});
console.log("1");
timer2.then(valor => {
console.log(valor);
console.log("3");
return new Promise((resolve, reject) => {
setTimeout(() => resolve("4"),1000);
});
}).
then(valor => console.log(valor));
Async e Await
Apenas como nota final, deixo aqui a dica que async
e await
são bem mais fáceis de trabalhar, ficando num estilo mais perto do convencional quando não se trabalha com funções assincronas. É importante de perceber primeiro como funcionam as Promises pois esta alternativa é baseada nelas.
Não irei entrar em detalhes pois o @epx já deu uma ideia de seguir por este caminho.