Promessas de JavaScript

Índice

    Mostrar índice

"Prometo um resultado!"

"Produzir código" é um código que pode levar algum tempo

“Consumindo código” é o código que deve aguardar o resultado

Uma promessa é um objeto JavaScript que vincula a produção de código e o consumo de código

Objeto de promessa JavaScript

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

Sintaxe da promessa

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Quando o código produtor obtiver o resultado, ele deverá chamar um dos dois callbacks:

Success

myResolve(valor do resultado)

Error

myReject(objeto de erro)

Propriedades do objeto de promessa

Um objeto JavaScript Promise pode ser:

  • Pendente

  • Realizada

  • Rejeitado

O objeto Promise suporta duas propriedades: estado e resultado.

Enquanto um objeto Promise está "pendente" (funcionando), o resultado é indefinido.

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

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

"pending"

indefinido

"fulfilled"

um valor de resultado

"rejected"

um objeto de erro

Você não pode acessar as propriedades estado e resultado do Promise.

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

Prometa como fazer

Aqui está como usar uma promessa:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() aceita dois argumentos, um retorno de chamada para sucesso e outro para falha.

Ambos são opcionais, portanto, você pode adicionar um retorno de chamada apenas para sucesso ou falha.

Exemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// some code (try to change x to 5)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

Exemplos de promessas de JavaScript

Para demonstrar o uso de promessas, usaremos os exemplos de retorno de chamada do capítulo anterior:

  • Esperando por um tempo limite

  • Esperando por um arquivo

Esperando por um tempo limite

Exemplo de uso de retorno de chamada

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

Exemplo usando promessa

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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Esperando por um arquivo

Exemplo usando retorno de chamada

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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callbacks</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

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

getFile(myDisplayer); 
</script>

</body>
</html>

Exemplo usando Promessa

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("File not Found");
       
    }
  };
  req.send();
});

myPromise.then(
   
  function(value) {myDisplayer(value);},
   
  function(error) {myDisplayer(error);}
);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

Suporte ao navegador

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

A tabela a seguir define a primeira versão do navegador com suporte total para objetos Promise:

Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Feb, 2014 Jul, 2015 Apr, 2014 Sep, 2014 Mar, 2014