JavaScript Promise

"I Promise a Result!"

"Producing code" (productiecode) is de code die tijd nodig heeft

"Consuming code" (consumptiecode) is de code die een resultaat moet wachten

Promise is een JavaScript-object dat productiecode en consumptiecode verbindt

JavaScript Promise-object

Een JavaScript Promise-object bevat productiecode en aanroepen van consumptiecode:

Promise syntaxis

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (kan tijd nodig hebben)
  myResolve(); // bij succes
  myReject();  // bij fout
});
// "Consuming Code" (moet een vervulde belofte wachten)
myPromise.then(
  function(value) { /* Code bij succes */ },
  function(error) { /* Code bij fout */ }
);

Wanneer de code wordt uitgevoerd en een resultaat wordt verkregen, moet één van de twee callbacks worden aangeroepen:

Resultaat Aanroep
Succes myResolve(resultwaarde)
Fout myReject(foutobject)

Eigenschappen van Promise-object

JavaScript Promise-object kan zijn:

  • Pending
  • Fulfilled
  • Rejected

Een Promise-object ondersteunt twee eigenschappen:state en result.

Wanneer een Promise-object "pending" (werken) is, is het resultaat undefined.

Wanneer een Promise-object "fulfilled" is, is het resultaat een waarde.

Wanneer een Promise-object "rejected" is, is het resultaat een foutobject.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" Resultaatwaarde
"rejected" error object

Je kunt de eigenschappen state en result van Promise niet bereiken.

Je moet de Promise-methode gebruiken om Promise te verwerken.

Hoe gebruik je Promise

Hier is een voorbeeld van het gebruik van Promise:

myPromise.then(
  function(value) { /* code als succesvol */ },
  function(error) { /* code als er een fout is */ }
);

Promise.then() heeft twee parameters, een callback voor succes en een callback voor falen.

Beide zijn optioneel, dus je kunt callbacks toevoegen voor succes of falen.

Voorbeeld

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Code genereren (dat kan enige tijd duren)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Fout");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Probeer het zelf

JavaScript Promise voorbeeld

Om het gebruik van Promise te demonstreren, zullen we het voorbeeld van de callback uit het vorige hoofdstuk gebruiken:

  • Wachten op tijdsoverschrijding
  • Wachten op het bestand

Wachten op tijdsoverschrijding

Gebruik van een callback voorbeeld

setTimeout(function() { myFunction("Ik hou van je !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Probeer het zelf

Gebruik van een Promise voorbeeld

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("Ik hou van je !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Probeer het zelf

Wachten op het bestand

Gebruik van een callback voorbeeld

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

Probeer het zelf

Gebruik van een Promise voorbeeld

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("Bestand niet gevonden");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Probeer het zelf

Browserondersteuning

ECMAScript 2015, ook wel ES6 genoemd, heeft JavaScript Promise-objecten geïntroduceerd.

De tabel hieronder vermeldt de eerste browserversie die Promise-objecten volledig ondersteunt:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Februari 2014 Juli 2015 April 2014 September 2014 Maart 2014