JavaScript: O que é uma Promise?
Tags: javascript, beginners, react, webdev
Published: 2022-12-27 19:45:33


Neste artigo irei te explicar o que é, como identificar, usar e criar uma Promise no Javascript
# O que é uma promise

Segundo a documentação da mozilla uma promise é:

> Promise é um objeto usado para processamento assíncrono. Uma Promise (de "promessa") representa um valor que pode estar disponível agora, no futuro ou nunca.
- [MDN Web Docs](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise)

Porém, eu acho essa explicação um pouco confusa e nada clara principalmente para devs iniciantes. Então bom com as minhas palavras, o que é uma promise? Vamos partir do princípio que uma promise é uma função que demora fazer algo e retornar o resultado (Exemplo: uma busca no banco de dados) e você faz com o que o seu código espere que essa função seja executada e finalizada para continuar com a execução do mesmo.

Para começarmos vamos considerar o trecho de código abaixo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7q5bkl75r3pgcx11k0o.png)
 
Aqui temos uma função chamada listarUsuarios que retorna um array de usuarios após 5 segundos usando o setTimeout para simular a espera de uma consulta ao banco de dados. Ela não é nosso objetivo neste momento.

Vamos nos atenta a função **main** nela chamamos a função **listarUsuarios** pegamos o resultado e mostramos na tela. Da forma que esta sendo executada a função irá retornar undefined. Mas porquê? Por que não usamos a sintaxe para fazer o código "esperar" que a execução da função acabe e possa executar a linha seguinte.

Abaixo o código que irá retornar os usuários:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va0au2nxnxtyg8ewf5ny.png)

O que mudou? Primeiramente sinalizamos na função que irá ocorrer uma chamada assíncrona usando a palavra-chave `async` na assinatura da função e depois usamos a palavra-chave `await` para sinalizarmos que queremos que o JS espere a execução daquela função terminar para prosseguir com a execução do código.


## Como identificar

Uma função assíncrona sempre será indentifica pela palavra `await` em frente a sua chamada como no exemplo acima. Então sempre que você ver um await na frente de uma função significa que é assíncrona e levará um tempo para ser executada. E a palavra chave `async` no começo das funções serve para sinalizar que dentro daquela função uma operação assíncrona é executada ou também posso dizer que uma Promise é executado, sendo o resultado dela `reject` ou `resolve`.

Uma Promise também pode ser tratada usando as funções `.then()` e `.catch()`.

O `.then()` espera uma função de callback para ser executada quando a operação acabar e ele será chamado apenas quando a Promise for concluída sem erros. Enquanto isso o `.catch()` faz a mesma coisa, porém sendo executado apenas quando existe algum problema na execução da Promise.

Aqui um exemplo do primeiro código usando essa sintaxe

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3k1jkn3g9ehzi5mwxuf.png)

## Vamos um pouco mais fundo

Agora que já te expliquei superficialmente e você já entendeu o que é uma Promise e para que serve as palavras chaves `async` e `await` vamos falar um pouco sobre os status da Promise.

Uma Promise pode ter 3 status que são:

* pending: estado inicial, nem cumprido, nem rejeitado. Algo como "executando". PS: Esse é o estado que será retornado caso você queira dar um console.log no resultado da Promise sem usar async e await e nem then catch

* fulfilled: significa que a promise foi executado com sucesso e retornou o que pretendia.

* rejected: significa que a houve um problema e a promise falhou na sua execução.

Ainda existe muita coisa para ser falado sobre Promise. Porém, para uma explicação e entendimento rápido (que o meu objetivo nesse caso) prefiro parar por aqui. Espero que a minha explicação sobre esse assunto um pouco confuso para os iniciantes tenha ajudado.

Caso queira entrar mais a fundo no assunto recomendo muito ler a [documentação da própria Mozilla](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise)


Muito obrigado por ler 🙃

[Links úteis](https://bento.me/cmsdev)