Promises: Como funciona Promises no JavaScript

Fala stackers!

Atualmente no JavaScript as Promises são a maneira padrão para lidar com comportamentos assíncronos (asynchronous). Mas como realmente elas funcionam? Vamos ver ao longo do post!

Promessas na vida real

Quando nós fazemos uma promessa a alguém, você tem a palavra da pessoa que ela irá ser cumprida.

Mas eu não disse quando ela irá ser cumprida, então a vida segue seu curso.

Existem dois cenários para isso, cumprir ou não.

Cumprindo

Chega o derradeiro dia eu ou você cumpre a promessa feita. Vai ser um dia tão maluco que vamos ficar felizes e podemos até postar isso no Twitter!

Rejeitando ou não cumprindo

Chega o triste dia em que realizamos a nós mesmo que não podemos cumprir aquela promessa.

Vai ser o total oposto do outro, vamos ficar chateados e vamos fazer aquele post grandão no Twitter falando sobre isso.

Mas em ambos os cenários, isso causou uma ação. A primeira é positiva e a segunda é negativa.

Quando usar uma Promise

Nós sabemos (ou não) que o JavaScript é síncrono, ele roda o código do topo até o final. Cada linha de código abaixo vai esperar a execução da superior para prosseguir.

Mas podemos programar assincrono nele também

Mas quando queremos pegar um dado de uma API, não sabemos o quão rápido isso vai ser retornado para nós. Então não sabemos se irá nos retornar os dados ou um erro. Sabemos que erros são constantes e acontecem, são coisas que nem sempre estamos esperando, mas podemos estar preparados para elas!

Então até pegar o resultado de nossa API, o nosso código congela o browser, nem a gente e muito menos os usuários ficam felizes com isso. 

Uma clássica situação para usarmos as Promises!

Como usar uma Promises

Agora sabemos quando devemos usar uma Promise quando fazemos uma requisição Ajax. Vamos primeiro ver como definir uma function para retornar uma Promise.

Definindo uma função como uma Promise

Um pequeno exemplo:

function queFazAlgo(value) {
    return new Promise((resolve, reject) => {
        // Chamada de API
        setTimeout(() => {
            if(value) {
                resolve(value)
            } else {
                reject('O valor não é verdadeiro')
            }
        }, 4000)
    });
}

A function retorna uma Promise que pode ser resolvida ou não, igual as promessas da vida real, podem ser cumpridas ou não.

Estados

De acordo com o MDN Web Docs, uma Promise pode ter três estágios:

• pending (pendente): Estado inicial, que não foi realizada nem rejeitada.
• fulfilled (realizada): sucesso na operação.
• rejected (rejeitado):  falha na operação.

Pending

É o estado inicial. Significa que logo vamos chamar algo como uma function  fazAlgumaCoisa(). Ainda não sabemos se ela vai ser resolvida ou rejeitada.

Fulfilled

Aqui é onde o valor é cumprido, a Promise é resolvida. Neste caso nós passamos o valor da variável nele e usamos quando chamamos essa function.

Podemos definir as condições para decidir quando a nossa Promise será resolvida.

Rejected

Agora a rejected, é quando o valor é falseado e a Promise é rejeitada. Neste caso ‘‘pinga’’ uma mensagem de erro. Aqui é uma string, mas quando fazemos uma requisição Ajax, aí passa a ser um server error.

Usando uma Function como uma Promise

Agora sabemos como definir uma Promise, podemos ver como uma function retornar uma Promise.

fazAlgo().then((result) => {
    // Faz alguma coisa com o resultado
}).catch((error) => {
    console.error('Error message: ', error)
})
// Usa um retorno `Promise` com Async/Await 
(async () => {
    let valor = null
    try {
        valor = await fazAlgo()
        // Faz algo com o resultado
    } catch(error) {
        console.error('Error message: ', error)
    }
})();

Você consegue reconhecer uma function que retonar uma Promise olhando que ela tem o método .then() ou um await. O catch será chamado quando ocorrer um erro em nossa Promise. Então lidamos com esse erro e seguimos em frente.

Conclusão

Espero que você tenha entendido como uma Promise funciona, tente sempre levar os exemplos para algo cotidiano, ela funciona muito bem para as Promises como vimos no post. Com essas dicas, você dificilmente vai esquecer como uma Promise funciona e isso é uma promessa.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.