{"id":33606,"date":"2017-10-10T03:01:04","date_gmt":"2017-10-09T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33606"},"modified":"2017-10-11T19:39:23","modified_gmt":"2017-10-11T09:39:23","slug":"promise-object-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/promise-object-primer-tutorial\/","title":{"rendered":"Promise Object Primer Tutorial"},"content":{"rendered":"
\"Promise<\/a>

Promise Object Primer Tutorial<\/p><\/div>\n

The Promise<\/a> Javascript object opens up methods where you, as a web application client side programmer, can end up with a single variable<\/font> approach to the management of asynchronous processes …<\/p>\n

<\/img><\/p>\n

… but the use of this can’t hide the issue of what to do with client side logic to do nothing, what we think of as “sleep” in those “reject” parts of the diagram above.<\/p>\n

We’ve started our journey of understanding, with inspiration from this useful link (and this one<\/a>), thanks, of Promise<\/a> Javascript object by doing the document.body onload event loaded<\/b> …<\/p>\n


\n<script type='text\/javascript'>
\nvar lleft=false, lright=false, cell=\"left\", damdone=false;
\nvar wis, adate;
\n<\/b>
\n<\/b>
\n\/\/ From Jake Archibald's Promises and Back:
\n\/\/ http:\/\/www.html5rocks.com\/en\/tutorials\/es6\/promises\/#toc-promisifying-xmlhttprequest
\n<\/b>
\nfunction get(url) {
\n \/\/ Return a new promise.
\n return new Promise(function(resolve, reject) {
\n \/\/ Do the usual XHR stuff
\n var req = new XMLHttpRequest();
\n req.open('GET', url);
\n<\/b>
\n req.onreadystatechange = function () {
\n \/\/document.title='' + req.readyState + ' ' + req.status;
\n if (req.readyState == 4 && req.status == 200) {
\n console.log(req.responseText);
\n document.getElementById(cell).innerHTML=req.response;
\n if (req.response.indexOf('ighthous') != -1 || damdone) {
\n adate=new Date();
\n document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php Ajax response<br><br>';
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php Ajax response<br><br>';
\n adate=new Date();
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php IFRAME src<br><br>';
\n document.getElementById('h' + cell).innerHTML+='<iframe onload=\"ldone(' + \"'australian_lighthouses.php'\" + ');\" style=\"width:800px;float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php#selsort\" title=\"Lighthouses in Australia\"><\/iframe>';
\n } else {
\n adate=new Date();
\n document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.html Ajax response<br><br>';
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.html Ajax response<br><br>';
\n damdone=true;
\n wis='' + eval(eval(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue(\"width\").replace('px','')) - 0) + 'px';
\n adate=new Date();
\n if (document.getElementById('hmiddle').innerHTML == \"\") document.getElementById('hmiddle').innerHTML=document.getElementById('middle').innerHTML;
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.html IFRAME src<br><br>';
\n document.getElementById('h' + cell).innerHTML+='<iframe onload=\"ldone(' + \"'dams_usa.html'\" + ');\" style=\"width:' + wis + ';float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Dams in the USA\"><\/iframe>';
\n }
\n cell=\"right\";
\n }
\n };
\n<\/b>
\n \/\/ Handle network errors
\n req.onerror = function() {
\n reject(Error(\"Network Error\"));
\n };
\n<\/b>
\n \/\/ Make the request
\n req.send();
\n });
\n}
\n<\/b>
\nfunction ldone(what) {
\n adate=new Date();
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + what + ' IFRAME loaded<br><br>';
\n}
\n
\nfunction ol() {
\nadate=new Date();
\ndocument.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php get()<br><br>';
\ndocument.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'australian_lighthouses.php get()<br><br>';
\nget('\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php').then(function(response) {
\n console.log(\"Success!\", response);
\n}, function(error) {
\n console.error(\"Failed!\", error);
\n});
\n<\/b>
\nadate=new Date();
\ndocument.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.html get()<br><br>';
\ndocument.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.html get()<br><br>';
\nget('\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html').then(function(response) {
\n console.log(\"Success!\", response);
\n}, function(error) {
\n console.error(\"Failed!\", error);
\n});
\n<\/b>
\n}
\n<\/b>
\n<\/script>
\n<\/code><\/p>\n

… asynchronous Ajax XMLHttpRequest() calls and follow this up with IFRAME src= calls, the difference being, the latter method loads any Javsacript and CSS styling in the <head><\/head> tag whereas the former doesn’t. We like the neatness of the syntax here, but still need those “reject” places to be able to effectively sleep to not overload your web browser with activity … and that’s where we’ll leave you with a live run HTML and Javascript promises_test.html<\/a> source code link, thinking on that.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n