Learning JavaScript Promises can be daunting because there is so much to know about how they work. The following is a very simple example that helped me get my head around them.
The code
(function (window, document, undefined) {
// Smallest possible Ajax implementation https://gist.github.com/segdeha/5601610/
function a(u,c){var x=new XMLHttpRequest;x.open('GET',u);x.onreadystatechange=function(){3<x.readyState&&c(x)};x.send()}
function success(response) {
document.getElementById('version').innerHTML += response
}
function failure(response) {
document.getElementById('version').innerHTML += '<span style="color: red">' + response + '</span>'
}
function getVersion(widget) {
return new Promise(function (resolve, reject) {
function complete(ajax) {
if (ajax.status > 0 && ajax.status < 400) {
resolve('The version number for ' + widget + ' is ' + ajax.response + '.<br>')
}
else {
reject('There was an error fetching the version number for ' + widget + '.<br>')
}
}
a('/widgets/version.php?widget=' + widget, complete)
})
}
function go() {
getVersion('phpfr').then(success, failure)
getVersion('makeapass').then(success, failure)
getVersion('getdilbert').then(success, failure)
getVersion('myfakewidget').then(success, failure)
}
document.querySelector('button').addEventListener('click', go)
}).call(this, this, this.document)