Acredito que este é um tópico que muitos iniciantes se deparam e não entendem por completo. Parece que esse assunto é bem complexo e chato de se estudar. Mas garanto que o conceito de Promise não é esse monstro que você imagina 😃. Vamos entender o conceito, o objetivo delas e como usar elas.
Por que elas existem?
Algo que você precisa saber é que as Promises foram criadas para facilitar a forma que fazemos um código assíncrono. Antes para escrever este tipo de código JavaScript, era necessário varias linhas, tudo ficava muito grande, chato de se ler e entender. Com a promise podemos deixar nosso código bem mais simples e fácil de entender. Em outro artigo nós já aprendemos o que é um código assíncrono e porque eles são importantes. Caso queira ler clique aqui para acessar.
O que são?
Como o nome já nos diz um pouco, traduzido do inglês são promessas. É algo que será resolvido no futuro, que pode nos devolver um resultado positivo ou negativo. Veja esse exemplo:
const x = 1
A partir do momento que você criou sua variável você já tem ela disponível para usar no futuro dentro do seu código, como em um console.log(x), ou para ser usada em outra parte do seu código, então temos uma promessa de utilizar essa constante no futuro. Outro exemplo:
Quando você compra um lanche por um aplicativo de delivery, você sabe que existe uma promessa que no futuro vai receber do restaurante ou da rede de fast-food uma resposta afirmando que o seu pedido está sendo preparado ou não e quando será entregue.
O conceito de Promise é o mesmo. Quando você cria uma, tem a promessa de que algo será executado no futuro e logicamente algo vai ser devolvido no futuro. E pode ser quaisquer tipos de dados, como um number, string ou um objeto, um valor boolean ou até mesmo uma resposta de um requisição que retornou um erro por vários motivos.
A estrutura de uma Promise
Deve estar se perguntando como criar uma promise, quais parâmetros (argumentos) que ela recebe, como receber mensagens de sucesso e de erro. Bom vamos entender primeiro os parâmetros que podemos passa dentro de uma promise:
const naoIgual = y => new Promise((resolve, reject) => {
if (y === 'Ford') {
reject('Nome não pode ser igual a Ford');
}
else {
resolve(y);
}
});
Note que no exemplo acima estamos armazenando nossa função que é uma new promise dentro de uma constante, mas poderíamos usar ela como uma função clássica.
O que nos interessa agora é entender esses dois parâmetros que estamos passando dentro da nossa Promise, o resolve e reject. O primeiro é chamado quando temos uma resposta de sucesso e tudo foi realizado sem erros. O reject como o próprio nome sugere, está rejeitando a requisição por algum erro ou por algum dado não estar de acordo com alguma regra passada dentro da promise. Mas como vamos saber quando uma promise retornou um erro ou foi resolvida com sucesso? Para isso temos .then e .catch. Esses dois métodos que temos a nossa disposição dentro da Promise nos permitem disparar as nossas mensagens. Para sucesso usamos o .then. Para retornar mensagens de erro disparamos o .catch.
Para utilizamos esses dois métodos fazemos da seguinte forma:
const naoIgual = y => new Promise((resolve, reject) => {
if (y === 'Ford') {
reject('Nome não pode ser igual a Ford');
}
else {
resolve(y);
}
});
naoIgual('BMW')
.then(resp => console.log(`${resp} é diferente`))
.catch(err => console.log(err));
Se você rodar o código acima vai ter o resultado de sucesso, pois Ford é diferente de BMW, e a condição do IF é se y for estritamente igual a Ford, ele chama o reject, pois teríamos um erro que iria disparar o .catch. Caso contrário (else) o resolve é chamado disparando o .then, já que estamos passando um valor diferente de Ford, o resolve é chamado que dispara o then.
Várias requisições .then
Já sabemos o objetivo de cada método e como são feitas as chamadas de sucesso e erro. Mas outra aspecto interessante da Promise é que podemos chamar o .then mais de uma vez, veja o exemplo abaixo:
const primeiroElementoArray = a => a[0]
const nomeLetraMinuscula = letra => letra.toLowerCase()
const minhaPromise = a => new Promise((resolve) => {
resolve(['FORD', 'BMW', 'MERCEDEZ'])
});
minhaPromise()
.then(primeiroElementoArray)
.then(nomeLetraMinuscula)
.then(console.log)
Na primeira função realizamos uma busca pelo primeiro índice do nosso array, que corresponde a FORD. Na segunda usamos o toLowerCase para deixar todas as letras em minúsculo. No ultimo .then passamos um console.log para imprimir o resultado no terminal. Mas note que foi possível chamar várias vezes o .then. Isso ajuda quando temos que realizar vários tipos de processamentos em nosso código. Mas é bom tomar cuidado para não realizar várias chamadas em apenas uma promise.
Se você testar o código o resultado será esse:
Encadeamento
Além disso podemos chamar uma promise dentro de uma outra promise:
naoIgual('BMW')
.then(resp => console.log(`${resp} é diferente`))
.then(resp => new Promise((resolve, reject) => {}))
.catch(err => console.log(err));
Veja que no segundo .then estamos declarando uma outra promise. Isso se chama encadeamento. Uma promise inicia outra. Espero que tenha ficado claro.
Conclusão
Gostaria de deixar claro que o objetivo deste artigo é explicar de uma forma simples como a Promise funciona. Obviamente que a partir do momento que vamos ganhando mais experiência com o JavaScript e praticando mais os conceitos vão ficando mais claros. Se você pesquisar mais sobre Promise, vai ver outras funcionalidades que pode usar em Promises como race e promise.all. O que foi abordado aqui foi uma introdução para quem tem dúvidas sobre o tema possa entender o objetivo delas e como é a estrutura.
Agradeço por ler até aqui. Qualquer dúvida ou sugestão entre em contato ou deixe um comentário. Abraço e até o próximo post! 🚀