Javascript Promise: entenda o que é, como funciona e como fazer

Quando trabalhamos com desenvolvimento Front-end, em diversos momentos, nos deparamos com situações onde precisamos esperar algo acontecer para dar continuidade ao nosso código. Buscando evitar bugs ou problemas, é necessário que, de alguma forma, consigamos “pausar” o nosso código nesse tipo de situação. 

O JavaScript possui um recurso essencial para a otimização e resolução desse tipo de problema em nossos códigos: promessas, ou promises. No artigo de hoje, aprenderemos o que é uma promise, como esse recurso funciona e como podemos utilizá-lo em nossas aplicações.

O que é uma promise JavaScript?

Antes de entendermos o que é uma promise, é necessário entender o conceito de programação assíncrona. Imagine a seguinte situação: você é um ator/atriz e está atuando em uma peça muito famosa. Ensaiou durante meses e está pronto(a) para mostrar o seu talento para o público. Porém, antes disso acontecer, é necessário esperar nos bastidores o momento certo para entrar no palco, enquanto outros atores contracenam.

A programação assíncrona funciona da mesma forma. Enquanto alguns códigos são executados em nossa aplicação, outros ficam em “segundo plano”, esperando o momento exato para entrar em cena.

Mas o que isso tudo tem a ver com as promises? As promises são objetos nativos do JavaScript que permitem a execução de códigos assíncronos em nossas aplicações. Ou seja, as promessas dependem da execução de outros códigos para acontecerem.

Como funcionam as promises?

Como acabamos de ver, as promises são ações futuras executadas de forma assíncrona em nossos códigos. Dessa forma, não sabemos ao certo qual será o seu estado final. Se der tudo certo, essa promessa será resolvida (fulfilled). Caso contrário, ela será rejeitada (rejected) e retornará um erro.

Por que utilizar uma Promise?

Ao utilizar as promessas do JavaScript em nossos códigos, garantimos um melhor fluxo da execução de ações, evitando bugs e problemas indesejáveis em nossa aplicação, além de melhorar a estruturação e organização do código.

Encadeamento com then() e catch()

Para que nosso código execute determinada ação de acordo com o estado final da promessa, podemos utilizar o then e o catch. Caso nossa promise seja resolvida, podemos definir como nossa aplicação irá se comportar utilizando o then. Já na situação contrária, caso ocorra algum erro no processo, utilizamos o catch. Ambos recebem uma callback como parâmetro.

Essa definição de comportamentos em sequência é o que chamamos de encadeamento. Através da sua utilização, conseguimos entender melhor como o código funcionará e os resultados que poderemos obter com a promise. Abaixo temos um exemplo prático para melhor entendimento do conteúdo. Não se preocupe com a sintaxe e com os métodos agora, veremos isso a seguir.

Quando utilizar uma promise?

As promises serão utilizadas em nosso código sempre que precisarmos criar ações que dependem de outras para acontecer. Dessa forma, criamos o encadeamento e organizamos o fluxo assíncrono da nossa aplicação.

Sintaxe

Para utilizar a promise em nosso código é bem simples. Assim como outros objetos nativos do JavaScript, precisamos utilizar a palavra reservada new. Além disso, é necessário passar o resolve e reject como parâmetros.

Quais os 4 principais estados de uma promise?

Vimos anteriormente que uma promessa pode ter diferentes estados. São eles:

• Pending

Esse estado ocorre quando a promessa ainda está pendente. Ou seja, ainda não obteve um resultado de sucesso ou foi rejeitada.

• fulfilled

O Fulfilled é o estado de resolução da promessa. Ou seja, a promessa obteve sucesso e foi realizada.

• rejected

Como o próprio nome já sugere, esse é o estado que ocorre quando uma promessa foi rejeitada por algum motivo.

• Settled

É o estado final da promise. Após a promessa ter sido realizada com sucesso (fulfilled) ou rejeitada (rejected), ela se conclui e é encerrada (settled).

Métodos e Propriedades das promises

Ao utilizarmos as promessas, existem métodos e propriedades que devemos conhecer e podem ser úteis em nossos códigos. São eles:

a) Propriedades

• Promise.length

Essa propriedade possui como finalidade verificar o número de argumentos do construtor. No caso das promises, o valor sempre será 1.

• Promise.prototype

Através dessa propriedade, conseguimos acessar o método construtor da Promise.

b) Métodos

• Promise.all

A funcionalidade desse método é retornar uma nova promise assim que todas as promessas anteriores dentro do argumento dela forem resolvidas ou pelo menos uma rejeitada. Seu retorno é um array com as respostas de cada uma das promises.

• Promise.race

Após uma promise ter sido resolvida ou rejeitada, esse método retorna uma nova promise que terá a resposta da primeira resolvida.

• Promise.reject

Esse método retorna todas as promessas rejeitadas, com os seus erros e motivos.

• Promise.resolve

Assim como o método anterior, esse valor retorna todas as promessas resolvidas, com os seus devidos valores.

Como fazer promise JS?

Agora que já entendemos melhor sobre como as promises funcionam dentro do JavaScript, nada melhor que colocarmos a mão na massa e criarmos a nossa primeira promessa. Vamos lá?

Primeiro, vamos instanciar um novo objeto, passando como parâmetros o resolve e reject, conforma aprendemos anteriormente.

O próximo passo é criar as condições para que nossa promessa possa ser resolvida ou rejeitada. Para podermos testar de maneira prática e didática, criaremos uma constante que irá receber o valor de 10. Feito isso, faremos uma condicional, onde se o valor for maior ou igual a 10, a promessa será resolvida. Caso contrário, será rejeitada.

Agora precisamos criar o encadeamento a partir da novaPromessa, utilizando o then e catch, para que nossa promessa seja testada e retorne ao seu estado final.

Se verificarmos o nosso console, veremos que o resultado será “O valor 10 é maior ou igual a 10”, pois nossa promessa satisfaz a condição para ser resolvida. 

Caso alterássemos o valor da constante para 8 e verificássemos o console novamente, o resultado seria “O valor 8 é menor que 10”, pois a promessa não satisfaz mais a condição, sendo rejeitada.

Conclusão

As promessas são peças fundamentais em nosso código JavaScript. É fundamental que um bom desenvolvedor saiba utilizar com maestria esse recurso nativo da linguagem. Através dele, conseguimos estruturar melhor o nosso projeto e construir um fluxo de ações a serem executadas mais preciso e legível, facilitando o entendimento para todas as pessoas que tiverem acesso ao projeto.

Se você gostou do conteúdo e quer mergulhar de vez no mundo da programação, faça sua inscrição na próxima turma da Kenzie Academy Brasil.