JavaScript

Como utilizar Promises do JavaScript

2 de agosto de 2021

Como utilizar Promises do JavaScript

Neste artigo você vai aprender a como utilizar Promises em JavaScript, e também todos os métodos que este recurso possui

Como utilizar Promises capa

Fala programador(a), bora aprender mais sobre Promises e seus métodos: then, catch, all, race e outros!

Conteúdo também disponível em vídeo:

O que são as Promises?

Promises são como promessas da vida real, um código é executado esperando alguma resposta

Nós prometemos que alguma resposta será retornada, baseada na execução de algumas linhas de código

Alguns recursos de JavaScript retornam Promises, com a Fetch API, que serve para realizar requisições assíncronas

O bom deste retorno padrão de promessas é que utilizamos sempre os mesmos métodos, para dar continuidade e evidenciar erros, por exemplo

Como criar uma Promise?

Precisamos instanciar uma classe, que vai receber uma função anônima com dois parâmetros

  • resolve: Que é retornado quando há um sucesso na promessa, então podemos inserir algo neste método para utilizar no código;
  • rejected: Que é retornado quando um erro acontece, da mesma maneira que em resolve podemos colocar algo como parâmetro;

Normalmente as Promises são utilizadas para execução de algum código que pode demorar algum tempo

E isso é executado de forma assíncrona, sem que trave o restante do código

Veja um exemplo de Promise:

const myPromise = new Promise((resolve, reject) => {

	const nome = "Matheus"
  
  if(nome === "Matheus") {
  	resolve("Usuário Matheus encontrado!")
  } else {
		reject("O usuário Matheus não foi encontrado!")
	}

});

Criamos uma Promise que verifica um nome, isso na prática não seria necessário

Provavelmente esse nome viria de uma requisição para um banco de dados

E então a validação seria realizada

E como podemos executar uma Promise?

Para executar uma Promise vamos utilizar um método de encadeamento, chamado then

O then pode ser utilizado para finalizar uma Promise ou para dar continuidade, veja:

myPromise.then((data) => {
	console.log(data) // "Usuário Matheus encontrado!"
})

Desta maneira temos a continuidade da Promise, nos retornando o resultado esperado

Mas não é só isso que podemos fazer, podemos continuar encadeando then’s

E manipular o resultado, por exemplo

Veja:

myPromise.then((data) => {
	return data.toLowerCase()
}).then((fraseModificada) => {
	console.log(fraseModificada); // "usuário matheus encontrado!"
})

Aqui utilizamos um then para manipulação de dados, alterando todas as letras da frase pra letras minúsculas

Este é um exemplo bem comum de como utilizar Promises em situações reais

E se mudarmos o valor do nome, lá na definição da promessa caímos no catch

Que é um outro método, onde podemos receber as mensagens de erro, quando algo deu errado na nossa Promise

Veja:

const myPromise = new Promise((resolve, reject) => {

	const nome = "João"
  
  if(nome === "Matheus") {
  	resolve("Usuário Matheus encontrado!")
  } else {
		reject("O usuário Matheus não foi encontrado!")
	}

});

myPromise.then((data) => {
	return data.toLowerCase();
}).then((fraseModificada) => {
	console.log(fraseModificada);
}).catch((response) => {
	console.log(response); // "O usuário Matheus não foi encontrado!"
})

O nome foi alterado para João, então a Promise caiu no else

Ativando o método reject, dando então abertura para utilizarmos o catch

Que colocamos ao final dos then’s

Veja que a mensagem do else que foi impressa como resultado final

Então desta maneira podemos: processar promessas, encadear modificações e também tratar os erros que acontecem na execução

Executando várias Promises

Temos duas maneiras de executar vários promessas, uma que vai finalizar quando todas as promessas acabarem

Ou seja, há um tempo x de aguardo, determinado pela promise mais demorada

E então recebemos todas as respostas de uma vez, este método é o all

Veja um exemplo:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Resolveu o timeout')
  }, 2000)
})

const p2 = new Promise((resolve, reject) => {
  resolve('Promessa 2 resolvida!')
})

const p3 = new Promise((resolve, reject) => {
  resolve('Promessa 3 resolvida!')
})

const resolveAll = Promise.all([p1, p2, p3]).then((data) => {
  console.log(data) // todas as mensagens
})

Note que precisamos invocar o método all na classe Promise, que é de onde ele é originado

É também necessário passar o array de promessas a serem resolvidas, neste caso temos três

E um detalhe importante, a resposta só será enviada após 2 segundos, que é o timeout da primeira

Ou seja, receberemos algum retorno após esperar a execução da mais demorada, e este é um bom exemplo de uma requisição externa

Isso por que não sabemos quanto tempo ela demorará a responder, e as duas outras são imeadiatas, pois o código é apenas um resolve

Além do all há outro método, que é o race

Da mesma forma que em all, vamos passar um array de Promises ao método

Porém a diferença é que teremos a resposta apenas da Promise mais rápida, ou seja, a primeira que apresentar um retorno

Se aplicarmos no mesmo exemplo sabemos que o retorno do método nunca será a primeira, pois ela demora mais que as outras

Veja então o race em ação:

const p4 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Resolveu o timeout')
  }, 2000)
})

const p5 = new Promise((resolve, reject) => {
  resolve('Promessa 5 resolvida!')
})

const p6 = new Promise((resolve, reject) => {
  resolve('Promessa 6 resolvida!')
})

const resolveAllRace = Promise.race([p1, p2, p3]).then((data) => {
  console.log(data) // A resposta da mais rápida, que é a 5
})

Aqui a resposta do race é a Promise 5, isso porque o código da 5 e 6 são quase idênticos

Dada a ordem de execução ser 5 e depois 6, temos o retorno dela

Antes até mesmo do método all anterior, que responde depois

Isso por que o código de uma Promise é assíncrono, ou seja, executa em paralelo em nosso sistema

Exemplo real de Promise

Até agora foram criados exemplos que não são úteis no mundo real, apenas para entender como cada um dos recursos funciona

Então que aplicabilidade tem uma Promise em um projeto?

Como dito anteriormente a Fetch API retorna uma Promise, então podemos utilizar o nosso conhecimento adquirido para requisições externas

Veja um exemplo:

const userName = 'matheusbattisti'

fetch(`https://api.github.com/users/${userName}`, {
  method: 'GET',
  headers: {
    Accept: 'application/vnd.github.v3+json',
  },
})
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    console.log(`O nome do usuário é: ${data.name}`) // O nome do usuário é: Matheus
  })
  .catch((error) => {
    console.log(`Houve algum erro: ${error}`)
  })

Aqui mandamos um request de GET para a API do GitHub em busca de um usuário

Como dito antes, o fetch retorna uma Promise

Então podemos dar continuidade com then e catch

Aqui realizamos uma transformação de dados de texto para JSON, com o método json()

E depois retornamos o nome do usuário, no último then

Se algum erro algum ocorrer há o bloco com o método catch

Este exemplo é muito utilizado nas aplicações de hoje em dia, com frameworks React e Vue.js

Conclusão

Neste artigo você aprendeu a como utilizar Promises em JavaScript, um recurso moderno e muito simples

Vimos sua inicialização e também diversos métodos que compõe o recurso de promessas

  • new Promise: cria uma nova promessa;
  • resolve: resolve uma promessa, entregando uma mensagem de sucesso;
  • reject: rejeita uma promessa, entregando uma mensagem de erro;
  • then: encadeamento de Promises;
  • catch: tratamento de erro das promessas;
  • race: executa diversas promessas ao mesmo tempo, retornando a resposta da mais rápida;
  • all: executa diversas promessas, retornando a resposta de todas elas;

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x