Introdução a Promise com Javascript

 em Desenvolvimento

Bom, como este artigo é uma introdução, nada mais justo que começa-lo explicando o que seria uma promise.

1. O que é uma Promise?

“Promise é um objeto usado para processamento assíncrono, a promise é a representação de um valor que pode existir agora, no futuro ou até mesmo que nunca irá existir”.

Antes de mais nada vamos analisar essa definição…

“Promise é um objeto…”, nesse trecho eu escrevi que promise é um objeto, mas então, qual seria a definição de objeto neste caso? Não só em Javascript mas em várias linguagens de programação, um objeto pode ser um valor, uma variável, um função, uma instância de classe etc, neste caso se encaixa mais como algum tipo de valor ou variável

“…usado para processamento assíncrono…”, Nesse outro trecho nós vamos começar a ver algo muito importante, que é uma função assíncrona, mas afinal o que isso quer dizer? Vamos ver no tópico de programação assíncrona

Programação assíncrona

Vamos começar a entender pelo seu contrário, a programação síncrona acontece quando algo só é executado após o término do anterior, uma após a outra, assíncrona seria sem uma ordem específica. Para exemplificar: Pense que você foi fazer café em uma máquina, em programação síncrona, o ato de fazer café deve ter terminado para que outro comece, em programação assíncrona seria como se enquanto você espera o café, é possível comer alguma coisa, você não precisa esperar o café ser feito para comer.

Neste último parágrafo já é possível entender o porquê da promise ter relação com o tempo, de ser algo que pode existir, pode vir a existir ou até mesmo nunca existir

Estados das Promises

Durante sua execução, uma promise passa por várias etapas até retornar algum dado, e estes são os estados das promises (as etapas):

  • pending (pendente): A promise ainda não foi executada, para ser resolvida ou rejeitada;
  • fulfilled (realizada): A operação foi resolvida;
  • rejected (rejeitado): A operação foi rejeitada;
  • settled (estabelecida): Estado após a realização da promise (sendo resolvida ou rejeitada);

2. Como funciona uma promise?

Para começar, vamos escrever um código para entender como funcionam as promises:

let promise = new Promise(res => {
setTimeout(() => {
res('Deu certo yooooo')
}, 2000);
});
promise.then(res => {
console.log(res);
});

Primeiro eu declarei uma variável chamada promise , depois eu disse que ela era uma promise, fazendo a atribuição de new Promise, dentro dessa atribuição eu coloquei uma função do Javascript que é a setTimeout() que executa algo após um determinado tempo, no caso a função recebe o res(que é um parâmetro qualquer que eu passo para a Promise para receber alguma resposta). Então, depois para utilizar a promise criada, usamos o .then() que é uma função de callbak de sucesso, depois eu passei um parâmetro para essa função e mostrei está resposta. No console fica assim:

Alguns pontos relevantes:

Para criar a promise eu usei o new Promise e dentro dela eu coloquei a função setTimeout mas eles podem ser substituidos, o conceito da promise não precisa de algo para inicia-la desta forma, ou seja, uma promise pode existir sem ser criada desta forma ou até sem alguma função dentro da criação

Talvez vendo as imagens do que eu estou imprimindo na tela não fique tão claro o que é uma promise, mas ao executar, você verá que antes de aparecer no console a mensagem, o tempo que você determinou terá que passar, o que prova todo conceito que eu citei antes de promise

3. Promise rejeitada

No exemplo anterior vimos como funciona a promise, ou melhor, como funciona uma promise que foi resolvida, como eu havia dito no começo do artigo, a promise pode dar certo como também pode dar errado. Vamos ver um exemplo disso (Saiba que a promise ser rejeitada e a promise dar erro são duas coisas completamente diferentes):

let promiseReject = new Promise((res, rej) => {
setTimeout(() =>{
rej('Rejeitado')
}, 3000);
});
promiseReject.then(res => {
console.log(res);
});

Existem poucas diferenças em relação ao primeiro exemplo, mas a principal diferença é que eu estou passando 2 parâmetros para a promise, e automaticamente o primeiro será o de sucesso e o segundo o de falha, ao rodar no console aparece isso:

Aqui da pra perceber o que eu falei: “Saiba que a promise ser rejeitada e a promise dar erro são duas coisas completamente diferentes”, o que aconteceu não foi só a promise rejeitada mas também um erro, e por que aconteceu este erro?

Eu havia dito lá em cima que o .then() é uma função de callback de sucesso, então não podemos usar um callback de sucesso em uma promise que queremos que de falha, precisamos usar outro função, o .catch() , e o código fica assim:

let promiseTreat = new Promise((res, rej) => {
setTimeout(() =>{
res('tratamento')
}, 2000)
})
promiseTreat.then(res => {
console.log(res + " resultado")
})
.catch(err => {
console.log(err + " rejeitado")
})

Eu ainda mantive o erro para vermos a diferença. Agora… por que a promise rejeitada com tratamento apareceu depois?

Pelo conceito da promise, de programação assíncrona, você pode ver que o tempo da promise com tratamento ser executada é menor do que o da sem tratamento

4. Resolvendo múltiplas promises

Claro que você não precisa ficar resolvendo promise por promise, existe um jeito simples de se resolver várias promises de uma vez só, desta forma:

Promise.all([promise, promiseReject, promiseTreat])
.then((res1, res2, res3) => {
console.log('todas as promises foram resolvidas ' +
res1 + "," + res2 + "," + res3)
})
  .catch((err1, err2, err3) => {
console.log('Alguma promise foi rejeitada ' +
err1 + "," + err2 + "," + err3)
})

Coisas importantes no Promise.all :

  • Você precisa declarar as promises antes e após passar elas no Promise.all
  • Como parâmetro do Promise.all você precisa passa um array de promises
  • Você tem que passar o mesmo número de respostas do .then()ou .catch() do número de promises (você até pode ter um número menor de respostas, porém só vai aparecer o número de respostas que você colocou)

5. Encadeamento

Existe outra forma de executar múltiplas promises, que é o encadeamento, que consiste em fazer múltiplos callback’s, como no código a seguir:

let promise1 = new Promise(res => {
setTimeout(() => {
res('passou 2 segundos')
}, 2000)
})
let promise2 = new Promise(res => {
setTimeout(() => {
res('passou 3 segundos')
}, 3000)
})
let promise3 = new Promise(res => {
setTimeout(() => {
res('passou 4 segundos')
}, 4000)
})
promise1.then(res => {
console.log('passo 1 do encadeamento ' + res)
promise2.then(res2 => {
console.log('passo 2 do encadeamento ' + res2)
promise3.then(res3 => {
console.log('passo 3 do encadeamento ' + res3)
})
})
})
.catch(err => {
console.log('não foi :/')
})

A principal diferença entre um e outro é basicamente os muitos callback’s, e isso faz esta promise ser “mais assíncrona” que o Promise.all , pois a promise não será executada depois de 4 segundos, ela será executada depois de 2 segundos, e a cada segundo ele irá executar mais uma promise


Espero que tenham aprendido sobre Promises e um pouco de programação assíncrona, este ainda é um tópico básico, agora é com você para se aprofundar no assunto 🙂

Se quiser ver o código completo:

GitHub: https://github.com/BrenoP/Introducao-FlexBox-exemplo

Obrigado por ler até aqui, se você gostou do post e tem alguma dúvida ou alguma critica, me contate:

LinkedIn: https://www.linkedin.com/in/brenoperetta

Medium: https://medium.com/@peretta.breno

E-mail: peretta.breno@gmail.com

Postagens Recentes
Comentários
pingbacks / trackbacks

Deixe um Comentário

Comece a digitar e pressione Enter para pesquisar