Como usar promises em Javascript?

Exemplo de código de como usar promises em javascript.

Iae, Bão? Logo que comecei a usar promises percebi uma coisa, eu não fazia a menor ideia que estava usando promises 😅, se você está tentando entender o que são promises, espero que este post lhe ajude.

O que é uma promise?

Uma promise é que algo que vai ser realizado não importa quanto tempo demore, em algum momento haverá um retorno.

Como declarar uma promise em javascript?

const euSouUmaPromise = new Promise((resolve,reject) => {
  resolve('ok')
})

Argumentos da promise:

• resolve(): função utilizada quando a promise deve retornar com sucesso
• reject(): função utilizada quando a promise deve retornar com erro

Exemplo:

const euSouUmaPromise = new Promise((resolve,reject) => {
    setTimeout(() => {
        const retorno = "Se deu certo retorna isso"
        resolve(retorno)
    }, 1000)
    // setTimeout(() => {},milisegundos) é uma função js que permite
    // fazer como que o programa espere X milisegundos
    // antes de executar o que está dentro
})

euSouUmaPromise.then(repostaDaPromise => {
  console.log(repostaDaPromise)
})

console.log('Depois da promise')

// saída:
// Depois da promise
// Se deu certo retorna isso

Explicação: Se você observou bem, percebeu que o texto “depois da promise” foi exibido antes do que a promise deveria retornar (“Se deu certo retorna isso”). Isso acontece porque as promises são execuções assíncronas (“Que não ocorre ou não se efetiva ao mesmo tempo”. Fonte: https://dicio.com.br), logo quando o “javascript” chega na linha:

euSouUmaPromise.then(repostaDaPromise => {

ele começa a executar a promise, e ao mesmo tempo vai para o próximo comando na linha:

console.log('Depois da promessa')

que é executado primeiro, pois a promise ainda não foi concluída, e quando a promise for concluída ela vai retornar algo, no caso, o que retorna é “Se deu certo retorna isso”.

Beleza, mas com certeza você ainda tem alguma dúvida principalmente em relação a esse then() utilizado. O then() podemos traduzir para “então”, e entender o código a seguir da seguinte forma:

euSouUmaPromise.then(repostaDaPromise => {
  console.log(repostaDaPromise)
})

1. Execute esta promise (euSouUmaPromise)
2. e se ela for concluída com sucesso, então faça (euSouUmaPromise.then...).

Ou seja, o código que está dentro de then() promise seja concluída com sucesso.

Tá! mas como sei que ela foi concluída com sucesso?

Vamos ver o código da declaração da promise novamente:

const euSouUmaPromise = new Promise((resolve,reject) => {
    setTimeout(() => {
        const retorno = "Se deu certo retorna isso"
        resolve(retorno)
    },1000)
    // setTimout(() => {},milisegundos) é uma função js que permite
    // fazer como que o programa espere X milisegundos
    // antes de executar o que está dentro
})

Como expliquei no início, na declaração da promise ela recebe dois argumentos: resolve e reject (por agora só usamos o resolve).

Então no momento que fazemos resolve(retorno) estamos dizendo que a promise deve retornar com sucesso e com o argumento que está dentro de resolve(), e é por este motivo que no console é exibido a mensagem “Se deu certo retorna isso”, já que em:

euSouUmaPromise.then(repostaDaPromise => {
  console.log(repostaDaPromise)
})

O then() vai receber o que o resolve() retornou e utilizar como quiser, seja exibindo no console ou qualquer outra coisa.

Entendi, e aquele tal de reject?

Bem lembrado, vamos modificar um pouco nosso exemplo inicial primeiro:

const euSouUmaPromise = new Promise((resolve,reject) => {
    setTimeout(() => {
        const retorno = "Se NÃO deu certo retorna isso"
        reject(retorno) // MODIFICADO PARA "reject"
    },1000)
    // setTimout(() => {},milisegundos) é uma função js que permite
    // fazer como que o programa espere X milisegundos
    // antes de executar o que está dentro
})

euSouUmaPromise.then(repostaDaPromise => {
  console.log(repostaDaPromise)
})

console.log('Depois da promise')

// saída:
// Depois da promise

Percebeu? Somente o texto “Depois da promise” foi exibido. Isso acontece porque não fizemos um tratamento caso a promise fosse executada e não tivesse uma resposta de sucesso. Como eu já disse o then() só é executado caso a promise tenha uma resposta de sucesso, e como utilizamos o reject(), essa resposta foi de falha. Para executar algo quando a promise falhar utilizamos o .catch(), por exemplo:

const euSouUmaPromise = new Promise((resolve,reject) => {
    setTimeout(() => {
        const retorno = "Se NÃO deu certo retorna isso"
        reject(retorno) // MODIFICADO PARA "reject"
    },1000)
    // setTimout(() => {},milisegundos) é uma função js que permite
    // fazer como que o programa espere X milisegundos
    // antes de executar o que está dentro
})

euSouUmaPromise.catch(repostaDaPromise => {
  console.log(repostaDaPromise)
})

console.log('Depois da promise')

// saída:
// Depois da promise
// Se NÃO deu certo retorna isso

Pronto, dessa vez o texto “Se NÃO deu certo retorna isso” foi exibido.

Vamos agora para um exemplo um pouco maior:

const euSouUmaPromise = new Promise((resolve,reject) => {
  const idade = 20
  setTimeout(()=> {
    if(idade > 18) resolve("Você é maior de idade")
    else reject("Você NÃO é maior de idade")
  },1000)
})

euSouUmaPromise.then(repostaDaPromiseSucesso => {
  console.log(repostaDaPromiseSucesso)
}).catch(repostaDaPromiseErro => {
  console.log(repostaDaPromiseErro)
})

console.log('Depois da promise')

// saída:
// Depois da promise
// Você é maior de idade

ntes de mais nada, sim você pode usar then() e catch() juntos e dependendo do caso é o ideal, pois precisamos saber se a promise retornou com sucesso ou não.

Acredito que depois de tudo que viu aqui, este último exemplo deve ter caído como uma luva (se quiser, muda “idade” para um valor menor que 18 e veja o que acontece).

Um pouco mais sobre promises em Javascript

Logo que comecei a utilizar promises confesso que eu não sabia que aquilo eram promises, mas depois aprendi e pode ser que você também não chegue a declarar uma promise caso esteja iniciando os estudos ainda, então agora vou passar um exemplo de como você pode se deparar com uma promise, já que talvez você chegue a utilizar promises já feitas.

Não se preocupe com o fetch, a única coisa que você precisa saber é que ele faz uma requisição, retorna uma promise que pode ser bem sucedida ou não, utilizamos ele para obter a reposta de um servidor, nesse caso estamos apenas puxando dados sobre cotação.

fetch("https://economia.awesomeapi.com.br/json/all")
    .then(response => {
        response.json().then(data => {
            console.log(data)
        })
    }).catch(erro => {
        console.log(erro)
    })

console.log('Depois da promise')

// saída
// Depois da promise
// object

Agora vamos entender como tudo está acontecendo:

1. Fazemos uma requisição para URL de cotação.
2. Como já sabemos, o programa continua e a promise fica sendo executada de forma assíncrona.
3. O console exibe o texto “Depois da promise”.
4. A promise é executada com sucesso e retorna um valor na variável “response”.
5. “response” executa a função “json()”, que também é uma promise.
6. “json()” retorna um objeto pela variável “data”.
7. “data” é exibida no console.

E o resolve()? E cadê o reject()?

Bem, fetch já retorna uma promise, dentro da função já foi definido quando o resolve()/reject() vai ser executado, logo nós apenas utilizamos o then() e o catch() para saber se a promise foi bem sucedida ou não, nesse caso, para saber se nossa requisição teve uma resposta válida.

Não faça um funil de promises (Callback Hell)

Neste último exemplo tínhamos uma promise sendo executada dentro de outra:

// Promise 1
fetch("https://economia.awesomeapi.com.br/json/all")
    .then(response => {
        // Promise 2
        response.json().then(data => {
            console.log(data)
        })
    }).catch(erro => {
        console.log(erro)
    })

Neste caso aqui não teríamos grandes impactos, mas se tivéssemos cerca de três ou mais promises sendo executadas dessa forma, o código estaria uma bagunça e causaria o famoso Callback Hell, o que poderia prejudicar muito a sua leitura.

Uma forma de tratar isso é apenas encadeando o retorno das promises, dessa forma:

fetch("https://economia.awesomeapi.com.br/json/all")
    .then(response => {
        return response.json()
    })
    .then(data => {
        console.log(data)
    })
    .catch(erro => {
        console.log(erro)
    })

Viu? Dessa forma o código fica muito mais legível, executa da mesma maneira, e você pode encadear quantos then()’s quiser.

Obrigado por chegar até aqui, espero que eu tenha lhe acrescentado conhecimento de alguma forma.

Tatakae Dev!