I have assembled a working example for you in the following fiddle
promise example - JSFiddle - Code Playground[
^]
Markup:
<input type="text" placeholder="your favourite color?" />
<button type="button" onclick="getData()">
Call Promise
</button>
<span id='PromiseStatus' />
JS/JQuery:
var $promiseStatus = $('#PromiseStatus');
function generateMessage(color) {
return 'your favourite color is ' + color;
}
function getData() {
$promiseStatus.text('Please wait...');
var colorPromise = new Promise(function(resolve, reject) {
var message = generateMessage($('input[type="text"]').val());
setTimeout(function() {
resolve(message);
}, 2000);
});
colorPromise.then(
function(response) {
console.log(response);
$promiseStatus.text(response);
});
}