Promises em JavaScript

#javascript #beginners #braziliandevs

Você aprendeu sobre promises no JavaScript? É um assunto que muita gente desiste logo de cara, mas vou tentar descomplicar ao máximo pra você.

1. Prólogo

Nunca fui de escrever muito, mas ensinando eu aprendo melhor e de quebra posso ajudar quem estiver começando, como diria o @guto citando um grande filósofo:

"Ninguém é tão grande que não possa aprender, nem tão pequeno que não possa ensinar" - Esopo.

Foi um grande desafio tentar colocar em uma explicativa tudo que eu entendo sobre Promises / Async Await, mas espero que você goste!

2. Mas que DIABOS é uma "Promise"?

O tal assunto que assusta muitos, porém nem é tão ruim. Promises são ferramentas poderosas que o Javascript possui para lidar com códigos assíncronos.

Uma Promise é um objeto usado para processamento assíncrono. Um Promise (de “promessa”) representa um valor que pode estar disponível agora, num futuro ou nunca.
Também pode ser entendido como algo de "consistência eventual". Agora vamos falar dos estados de uma promise:

3. Estados de uma Promise:

Uma promise pode ter três estados:

pending: estado inicial dela, ou seja, está aguardando o fim da execução do código;
fulfilled: quando a operação foi realizada e/ou "resolvida" com sucesso.
rejected: quando a operação termina com algum erro.

4. Como construir uma promise

Para construir nossas promises, podemos usar o constructor new Promise() que recebe uma função como parâmetro que recebera dois argumentos, o resolve e o reject

new Promise((resolve, reject) => {});

[...] resolve e reject serão usados para definirmos qual o estado que promise terá quando for finalizada.

Quando a promise for resolvida, usamos a função resolve;
Quando a promise for rejeitada, usamos a função reject

4.1 Retornando valores quando a promise é resolvida

Vamos criar uma promise e usar a função setTimeout para criar um código assíncrono que demora 1000 milissegundos (1 segundo) para ser executado. Além do setTimeout, vamos criar também uma função chamada generateRandomNumber que gera um número aleatório entre 0 e 10.

//função que gera um número aleatório
const generateRandomNumber = () => Math.round(Math.random() * 10);

const oneSecond = 1000;

// promise resolvida retornando o número aleatório
const resolvedPromiseCallback = () => {
    new Promise((resolve, reject)) {
        setTimeout(() => {
            const randomNumber = generateRandomNumber();
            resolve(randomNumber);
        }, oneSecond);
    }
}

Quando a promise resolvedPromiseCallback for chamada, ela será finalizada com o estado de resolvida, retornando o número gerado.

4.2 Retornando um erro quando a promise é rejeitada

Da mesma forma que podemos retornar um valor quando a promise for resolvida, também podemos retornar um valor quando ela for rejeitada, usando a função reject:

//função que gera um número aleatório
const generateRandomNumber = () => Math.round(Math.random() * 10);

const oneSecond = 1000;

// promise resolvida retornando o número aleatório
const resolvedPromiseCallback = () => {
    new Promise((resolve, reject)) {
        setTimeout(() => {
            const randomNumber = generateRandomNumber();
            resolve(randomNumber);
        }, oneSecond);
    }
}

// promise rejeitada retornando um objeto de erro
const rejectedPromiseCallback = () => {
    new Promise((resolve, reject)) {
        setTimeout(() => {
            const randomNumber = generateRandomNumber();
            reject(new Error(`O número ${randomNumber} é invalido.`))
        }, oneSecond);
    }
}

5. Finalização

Esses foram meus entendimentos sobre o estudo de promise e do jeito mais didático possível que eu consegui repassar. É um tópico bem extenso, mas eu espero que vocês tenham curtido e façam um bom uso!

Não esqueçam de encher a garrafinha d'agua e até o próximo artigo!

Twitter

Top comments (9)

oChefDev • Sep 5 '23

Você explicou como criar uma Promise usando o construtor new Promise(). Mas como podemos usar essa Promise em outras partes do nosso código? Você poderia dar um exemplo de como chamar uma Promise e lidar com seus estados 'fulfilled' e 'rejected'?"

Robson Grangeiro • Aug 29 '23

Muito bom seu artigo. Espero que considere criar outros, pois escreve muito bem, é direto, aborda o que realmente importa quando lemos um artigo.

Talvez para os próximos, uma sugestão seria colocar algumas fontes porque é sempre legal indicar de onde tiramos algum código ou exemplo. Também ficaria legal colocar o código mesmo ao invés de imagens, isso pensando que há muitos devs começando e copiar e colar e ver algum resultado pode motivar alguns a continuar ou experimentar coisas novas.

Novamente agradeço seu tempo e decisão de compartilhar.

Forte abraço!