Promise JavaScript

"I Promise a Result!"

"Producing code (código de produção)" é o código que leva algum tempo

"Consuming code (código de consumo)" é o código que deve esperar pelo resultado

Promise é um objeto JavaScript que liga o código de geração e o código de consumo

Objeto Promise do JavaScript

Um objeto Promise do JavaScript contém código de produção e chamadas de código de consumo:

Sintaxe de Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (pode levar algum tempo)
  myResolve(); // Em caso de sucesso
  myReject();  // Em caso de erro
});
// "Consuming Code" (deve esperar um compromisso cumprido)
myPromise.then(
  function(value) { /* Código para quando houver sucesso */ },
  function(error) { /* Código para quando houver erro */ }
);

Quando o código é executado e obtém um resultado, ele deve chamar um dos dois callbacks:

Resultado Chamada
Sucesso myResolve(valor de resultado)
Erro myReject(objeto de erro)

Propriedades do objeto Promise

Um objeto Promise do JavaScript pode ser:

  • Pendente
  • Cumprido
  • Rejeitado

Um objeto Promise suporta duas propriedades:state e result.

Quando um objeto Promise "pendente" (trabalhando), o resultado é undefined.

Quando um objeto Promise "cumprido", o resultado é um valor.

Quando um objeto Promise é "rejeitado", o resultado é um objeto de erro.

myPromise.state myPromise.result
"pendente" undefined
"cumprido" valor de resultado
"rejeitado" objeto de erro

Você não pode acessar as propriedades Promise state e result.

Você deve usar o método Promise para lidar com Promise.

Como usar Promise

Aqui está a maneira de usar Promise:

myPromise.then(
  function(value) { /* código se for bem-sucedido */ },
  function(error) { /* código se houver algum erro */ }
);

Promise.then() tem dois parâmetros, um para o callback de sucesso e outro para o callback de falha.

Ambos são opcionais, portanto você pode adicionar callbacks para sucesso ou falha.

Exemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Geração de código (pode levar algum tempo)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Experimente Você Mesmo

Exemplo de Promise em JavaScript

Para demonstrar o uso de Promise, usaremos o exemplo de callback do capítulo anterior:

  • Aguardando timeout
  • Aguardando arquivo

Aguardando timeout

Exemplo de uso de callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Experimente Você Mesmo

Exemplo de uso de Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Experimente Você Mesmo

Aguardando arquivo

Exemplo de uso de callback

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Experimente Você Mesmo

Exemplo de uso de Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("Arquivo Não Encontrado");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Experimente Você Mesmo

Suporte do Navegador

ECMAScript 2015, também conhecido como ES6, introduziu o objeto Promise do JavaScript.

A tabela a seguir indica a primeira versão do navegador que suporta completamente o objeto Promise:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Fevereiro de 2014 Julho de 2015 Abril de 2014 Setembro de 2014 Março de 2014