Creating a Promise

Promise experiments

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise -->

<button id="btn">Make a promise!</button>
<div id="log"></div>

JavaScript

'use strict';
var promiseCount = 0;

function logit(txt) {
	log.insertAdjacentHTML('beforeend', txt);
}
function testPromise() {
  var thisPromiseCount = ++promiseCount;

  var log = document.getElementById('log');
  logit( thisPromiseCount +
    ') Started (<small>Sync code started</small>)<br/>');

  // We make a new promise: we promise the string 'result' (after waiting 3s)
  var p1 = new Promise(
    // The resolver function is called with the ability to resolve or
    // reject the promise
    function(resolve, reject) {
      logit( thisPromiseCount +
        ') Promise started (<small>Async code started</small>)<br/>');
        logit(p1);
        // This is only an example to create asynchronism
      window.setTimeout(
        function() {
          // We fulfill the promise !
          resolve(thisPromiseCount);
        }, 
        Math.random() * 2000 + 1000);
  });

  // We define what to do when the promise is resolved/fulfilled with the then() call,
  // and the catch() method defines what to do if the promise is rejected.
  p1.then(
    // Log the fulfillment value
    function(val) {
      logit( val +
        ') Promise fulfilled (<small>Async code terminated</small>)<br/>');
        logit(p1);
      })
    .catch(
        // Log the rejection reason
        function(reason) {
            console.log('Handle rejected promise ('+reason+') here.');
            logit(p1);
        });

    logit( thisPromiseCount +
        ') Promise made (<small>Sync code terminated</small>)<br/>');
}if ("Promise" in window) {
  var btn = document.getElementById("btn");
   btn.addEventListener("click",testPromise);
}
else {
  log = document.getElementById('log');
  log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface.";
}