Promise Demo

by brnvndr

HTML

<h1>
Promises
</h1>
<small>Not the nero kind...</small>

<hr />

<h2>
Simple Promise
</h2>
<p>
<label>Should promise succeed? : </label>
<select id="promiseOptionSelect">
    <option value="yes" selected>Yes</option>
    <option value="no" >No</option>
</select>
<input type="button" value="Start Promise" onclick="startPromise()" />
</p>
<p>
<span id="promiseResult"></span>
</p>
<hr />
<h2>
Promise Chaining
</h2>
<p>
    <label>Chaining Result (Promises):</label>
    <span id="chainingResult"></span>
</p>

<p>
    <label>Chaining Result (Sync):</label>
    <span id="chainingResultSync"></span>
</p>

<hr />
<h2>
One Line Promise
</h2>
<p>
  <label>Result:</label>
  <span id="oneLinePromiseResult"></span>
</p>

<hr />
<h2>
Callback after promise fulfilled
</h2>
<p>
When you can read this, the delayedCallbackPromise has already been fulfilled, but no handler is defined
until the button is clicked.
</p>
<p>
  <input type="button" value="Attach Callback to Promise" onclick="delayedCallbackAssignment()" />
  <label>Result:</label>
  <span id="delayedCallbackAssignment"></span>
</p>

JavaScript

function startPromise() {

var p = new Promise (function(resolve,reject){
    window.setTimeout(function(){
        var optionsSelect = document.getElementById("promiseOptionSelect");
        
    		if (optionsSelect.options[optionsSelect.selectedIndex].value === "yes"){
        	resolve("User chose to resolve this promise");
        }
        else {
         reject("User chose not to resolve this promise");
        }   
    }, Math.random() * 2000 + 1000 ); //timeout of 1-2 seconds

});

// The canonical use for promises is calling out to some HTTP service to get data
// We cannot process the data until we get it, so we delay that processing inside the 
// then() function below.  If the data is unavilable for some reason, we will not be able
// to proccess the data, so we implement the catch() to handle this result.  
p.then(function(data){  //then() is excecuted when resolve() is called inside the promise
    document.getElementById("promiseResult").innerHTML = "promise was fulfilled: " + data;
}).catch(function(reason){ //catch() is executed when reject)_ is called inside the promise
    document.getElementById("promiseResult").innerHTML = "promise was rejected: " + reason;
});

}

let updateValue = function (value) {
    return new Promise((resolve,reject) => {
    	window.setTimeout(function(){
  				document.getElementById("chainingResult").innerHTML += value.toString() + " | "; 
        	resolve(value + 1); }, 2000 );
    });
       
};

//It's a bit hard to follow how the value param of updateValue() is passed from promise
//to promise.  The updateValueSync() method is what this looks like without promises.
//basically, the result of each promise/resolve is passed as input into the next function
//the key is the first .then(updateValue) ... we know that:
// A) updateValue is a reference to a function that expects a parameter "value"
// B) .then() is executed as the result of a promise executing the resolve() function
// C)  The promise returned by...