Para entender Promise, você precisa entender um pouco sobre funções do JS aqui: https://dev.to/uriel29/javascript-primeiro-aprender-funcoes-callback-sem-entender-o-conceito-3ggl
e callback aqui: https://dev.to/uriel29/callback-como-entender-45bl
Sem isso, você vai estar meio defasado na aprendizagem!
Você promete aprender Promise?
Sua resposta: Pode ser que eu aprenda, pode ser que eu não aprenda.
Pronto você acabou de aprender Promise em JS! Parabéns! Pode ir ler outro bom artigo aqui no Dev.to
Eu mesmo levei 1 semana para aprender Promise(estudando muitas horas por dia)
Claro que o conceito de Promise de uma forma técnica não é só isso!
"Uma Promise representa um proxy para um valor que não é necessariamente conhecido quando a promessa é criada. Isso permite a associação de métodos de tratamento para eventos da ação assíncrona num caso eventual de sucesso ou de falha. Isto permite que métodos assíncronos retornem valores como métodos síncronos: ao invés do valor final, o método assíncrono retorna uma promessa ao valor em algum momento no futuro."
Muito fácil de entender!
Traduzindo. Você promete, quando você cumprir a promessa, você pode ou não cumpri-la. Você promete de novo e de novo e de novo. Você é um prometedor viciado.
Se você esquecer do código Promise é exatamente isso!
Uma promessa que pode ser cumprida ou não!E que nunca para de prometer. E é só isso mesmo.
Mas vivemos de código JS!
Então precisamos passar isso em código!
Como estamos tratando de JavaScript os exemplos serão e JS.
O conceito de Promise já existe em outra linguagens.
Podendo ter outros nomes. E podendo ser resolvidos de outras formas.
Promises remontam à década de 70 — como você pode ver neste artigo https://en.wikipedia.org/wiki/Futures_and_promises — e eram chamadas de futures, deferred ou delays.
Pelo artigo, elas são definidas como:
Construtos usados para sincronizar a execução de um programa em linguagens de programação concorrentes. Eles descrevem um objeto que atua como um proxy para um resultado que é, inicialmente, desconhecido devido a sua computação não estar completa no momento da chamada.
https://medium.com/trainingcenter/entendendo-promises-de-uma-vez-por-todas-32442ec725c2
O event loop do JS(fornecido pelos navegadores e pela libuv do node) faz com que o JS seja uma linguagem concorrente.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/EventLoop
Para usar Promise no JS, utilizamos uma classe de nome Promise(obvio).
Mas temos que entender melhor essa parada!
O que é uma Promise?
É um objeto usado para realizar processamentos assíncronos, esse objeto guarda um valor que pode estar disponível agora, no futuro ou nunca. Isso permite o tratamento de eventos ou ações que acontecem de forma assíncrona em casos de sucessos ou falhas.
Uma Promise também possuí diferentes estados, sendo alguns deles:
Pendente (Pending).
Rejeitada (Rejected).
Realizada (Fulfilled).
Estabelecida (Settled).
O que uma Promise faz?
A Promise realiza processamentos e tratamentos de eventos ou ações assíncronas.
Como uma Promise faz?
Ao criar uma Promise, a mesma começa em estado inicial como pendente (pending), assim, os estados que ela pode ir são os demais informados anteriormente. Se ela estiver no estado de resolvida (resolved) é porque tudo deu certo, ou seja, a Promise foi criada e processada com sucesso, porém, em casos de falhas, a mesma estará no estado de rejeitada (rejected).
Uma das maneiras de fazer esse tratamento é através das funções then e catch, para sucesso ou falha respectivamente (mais á frente será exemplificado e explicado).
Você provavelmente vai criar poucas promises
Quase sempre estará diante de uma promise para usar ela.
Mas é bom saber criar!
Para criar uma!
Para isso usamos uma classe:
const suaVar = new Promise()
Mas não é só isso! Esta classe recebe uma função de callback(nossa velha conhecida e amada)
const suaVar = new Promise((resolve, reject) => {
}
)
Quase todo mundo usa como parâmetros resolve e reject.
Mas eles podem ser qualquer coisa na sua cabeça!
O mais legal de tudo isso é que cada parâmetro resolve ou reject serão usados como chamada de funções.
const suaVar = new Promise((resolve, reject) => {
const soma = 2+3
resolve(soma)
}
)
Se você esta acompanhando esta série, o primeiro texto deve ajudar entender isso.
function superLegal(parametro){
return new Promise((resolve, reject) => {
if(parametro > 5){
resolve('maior')
}else{
reject('deu xabú')
}
})
}
superLegal(6)
Quando chamamos a função superLegal e passamos um parâmetro.
Não acontece nada!
faltam algumas coisas!
Primeiro vamos voltar a o que é uma promessa no sentido da palavra em português!
Alguém promete que ira fazer algo.
Esse algo pode ser feito ou não!
Se formos por no JS da pra dizer
que SER FEITO é o resolve('pagando a promessa')
E o que não foi feito é o reject('num fiz não')
vamos refazer mas agora vamos mudar as palavras!
function euPrometoPagarMinhaDivida(divida){
return new Promise((cumpriaPromessa, descumpriPromessa) => {
if(divida === 1000){
cumpriaPromessa('paguei com juros')
}else{
descumpriPromessa('desculpa ai')
}
})
}
Creio que dessa forma seja simples de entender!
Alguém deve uma grana e promete pagar!
Ele paga ou não paga!
Não tem outra alternativa!
Se ele deve pra um agiota quem sabe não viva muito tempo se não pagar....
Voltando!
euPrometoPagarMinhaDivida(1)
Aqui chamamos a nossa função! Só que com valor 1. Esse valor faz nossa promessa ser rejeitada! E isso é ruim pra quem deve. Mas bom pra quem esta aprendendo promessas com JS!
Faltam alguns dados para seu aprendizado(espero) esteja completo.
Quando você chama uma promessa. Você precisa entender que existem duas possibilidades nessa promessa.
De ser resolvida(o cara pagar) ou rejeitada(ele não pagar)
Mas como saber quando é um ou outro?
Com isso:
.then((result) =>{ console.log(result)})
then()
é outra função!
Deu pra perceber que promessas tem funções demais srsrsr
A palavra em inglês tem algumas traduções!
Depois, então ou aí.
euPrometoPagarMinhaDivida(2000).then((result) =>{ console.log(result)})
Vamos pensar.
chamamos nossa função que tem uma promessa.
cara pagou aí(ou então, ou depois)
.then((result) =>{ console.log(result)})
quero mostrar isso em um console.log.
a função then, recebe uma função de callback(por isso é bom entender bem callback). Meu primeiro texto nessa série ajuda nisso!(espero)
Podemos dizer. aí mostre pra mim num console.
ou aí salve no banco de dados. Ou então...
Mas se a promessa não for cumprida? como faz?
Promises tem algo só pra isso, o catch
.then((result) =>{ console.log(result)})
.catch((result) =>{ console.log(result)})
a tradução de catch são inúmeras. Mas para nosso exemplo da pra usar APANHAR rsrsrs.
Se a pessoa que deve não pagar... vai apanhar kkk
euPrometoPagarMinhaDivida(2000)
.then((result) =>{ console.log(result)})
.catch((result) =>{ console.log(result)})
Mas falando sério, vamos usar a tradução capturar. No sentido de erro. Capturar, pegar o erro...
catch() é uma função. Mais uma função... Sim.
E esta função, recebe uma função de callback(que pode ser qualquer coisa...)
Promise é isso basicamente!
Uma promessa criada(quase sempre não será por você)
A ativação da promessa por meio da chamada.
Ela pode ser resolvida ou não!
E você usa código para cada parte.
Mas não é só isso..
Toda promessa retorna outra promessa.
Eita que o bicho pegou rsrsrs.
const juros = euPrometoPagarMinhaDivida(2000)
.then(sucesso, falha)
Como mostrado, você pode por em then()
duas funções. Uma de sucesso e uma de falha
Mas você não é obrigado.
o catch pode pegar o erro(no caso a função falha)
Eu prefiro dessa forma abaixo
euPrometoPagarMinhaDivida(2000)
.then(result => result)
.then(novoResult => console.log(novoResult,'juros de 100'))
.catch((result) =>{ console.log(result)})
Você pode pensar que tudo ficou complicado!
Não, não ficou. É a mesma coisa repetida praticamente. lembre do prometedor viciado!
No caso ali, o cara pagou, mas tem juros.
Pegamos o resultado e mostramos que tem juros.
Primeiro faz uma coisa, depois outra.
E se der erro em algum momento o catch pega e mostra que de algo errado!
Promise é basicamente isso!
Brincadeirinha não é não!
Tem outras formas de mostrar como ela trabalha!
Mas vou deixar isso pra um outro post.
Espero que tenha gostado. E tenha aprendido! Até o proximo!
Abraços!
Top comments (0)