JavaScript: Trabalhando com Promise

� uma classe que permite a construç�o de funç�es de processamento ass�ncrono representando um valor que poder� estar dispon�vel no futuro.

Entender como funcionam as promises � essencial uma vez que as novas APIs JavaScript est�o utilizando esta especificaç�o como padr�o no retorno de dados.

Sintaxe

new Promise((resolve: Function, reject: Function) => void)

resolve: funç�o para retornar o resultado da promise.
reject: funç�o para retornar o erro da promise.

Propriedades

A lista a seguir descreve as propriedades do objeto.

constructor - funç�o construtora que recebe um callback criando uma funç�o ass�ncrona.

M�todos

A lista a seguir descreve os m�todos do objeto.

then - permite definir o bloco executado mediante o cumprimento de uma promise
catch - permite definir o bloco executado mediante a rejeiç�o de uma promise

Funç�es

A lista a seguir descreve os m�todos est�ticos do objeto.

resolve - cria uma promise resolvida.
reject - cria uma promise rejeitada com o resultado igual ao argumento recebido.
all - une varias promises em um Array e retorna o valor quando todas tiverem sido resolvidas.

Na pr�tica

Exemplo 1

Neste exemplo vamos construir uma Promise a partir de um setTimeout e em seguida resolve-la com o then.

const timeout = (duration) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, duration)
  })
}

timeout(3000)
  .then(function() { // executa o bloco ap�s 3 segundos
    console.log('passou 3 segundos')
  })

Na linha 2 retornamos uma inst�ncia de Promise que recebe os argumentos resolve e reject ambas funç�es que representam "resolvido" ou "rejeitado", respectivamente. Elas s�o utilizadas como retorno para o resultado ou um erro do tipo Error da Promise.

Na linha 7 executamos a funç�o timeout que retorna a promise que constru�mos anteriormente. � importante lembrar que toda promise retorna dois m�todos recursivamente, o then e catch: o primeiro � executado quando a promise tem sucesso e o segundo quando ocorre uma falha na execuç�o.

Exemplo 2

No exemplo abaixo executamos uma promise que resultou em uma falha, ou seja, nossa execuç�o foi direcionada ao bloco catch. Veremos no bloco abaixo como esse tratamento � feito:

function getTodosOsUsuarios () {
  return new Promise((resolve, reject) => {
    reject(new Error('N�o foi poss�vel recuperar a lista de usu�rios'))
  })
}

getTodosOsUsuarios()
  .catch(err => console.log(err.message)) // N�o foi poss�vel recuperar a lista de usu�rios

Exemplo 3

� poss�vel resolver uma promise dentro de outra, por exemplo, considere a funç�o getTodosOsUsuarios() onde recuperamos o c�digo de todos os usu�rios cadastrados no sistema e em seguida pegamos o primeiro resultado para recuperar seus detalhes a partir da funç�o getUsuarioById().

function getTodosOsUsuarios () {
  return Promise((resolve, reject) => {
    resolve([ 1, 2, 3 ])
  })
}

function getUsuarioById (id) {
  return Promise((resolve, reject) => {
    resolve({ id, nome: 'Jo�o da Silva' })
  })
}

getTodosOsUsuarios()
  .then(ids => getUsuarioById(ids[0]))
  .then(usuario => console.log(usuario)) // { id: 1, nome: 'Jo�o da Silva' }

Exemplo 4

Em algumas situaç�es como mock de dados, pode surgir a necessidade de criar uma promise de forma r�pida. Para isso podemos construir uma que n�o retorne valor algum, como no exemplo abaixo:

Promise.resolve()
  .then(() => [])
  .then(console.log) // []

Exemplo 5

Assim como no exemplo anterior pode ser necess�rio retornar um erro, e para isso contamos com o Promise.reject(err: Error) que podemos ver abaixo:

Promise.reject(new Error('falha na execuç�o'))
  .catch(err => console.log(err.message)) // falha na execuç�o

Compatibilidade

Engine Vers�o Minima

Node.JS ( V8)	6.4.0
Safari ( WebKit)	11.1
Chrome ( V8)	68
Microsoft Edge ( ChakraCore)	17
Firefox ( Gecko)	61

Nota: O Opera utiliza atualmente grande parte do c�digo do Chrome como base para o seu pr�prio desenvolvimento e por isso ele n�o � mencionado nesta listagem.

Confira tamb�m

Cursos de JavaScript

Curso

Curso de Introduç�o ao JavaScript