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

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

Building on yesterday’s Promise Object Primer Tutorial<\/a> start to the Promise<\/a> object asynchronous processing research we are up to, we move on to try David Walsh<\/a>‘s Promise.all syntax …<\/p>\n


\nPromise.all([promise1, promise2]).then(function(results) { \/\/ method takes an array of promises and fires one callback once they are all resolved
\n\t\/\/ Both promises resolved
\n})
\n.catch(function(error) {
\n\t\/\/ One or more promises was rejected
\n});
\n<\/code><\/p>\n

… and can’t say that the new live run<\/a> followed into “bowels” of the flow of the syntax, but worked with what was tried, elsewhere, and kicked off with Promise.all and before we forget, none of this works in Internet Explorer. And what was that “try” all about? “Catch” this. We load the 2 web applications last night asynchronously in Ajax (invisibly) and then onto IFRAME src= loading (also invisible), but add into the mix a PHP Ajax call (all encased within the Promise.all method syntax) that sleeps for 75 seconds. The idea here is that it is only after all three web applications finish their Ajax we display those IFRAME elements made invisible earlier. The user sees the Dams in the USA, now, only well into its long read of data with the progress bar showing a good amount of progress. Note here, we don’t pretend just client solutions can really sleep, as PHP represents a server side solution to this sleep issue we started talking about yesterday.<\/p>\n

Here is the amended HTML and Javascript you could call promises_test.htm<\/a> and here is what changed<\/a>. Here is the very simple PHP sleep.php<\/a> … <\/p>\n


\n<?php if (isset($_GET['n'])) { sleep($_GET['n']); echo \"<p>Slept for \" . $_GET['n'] . \" seconds.<\/p>\"; } else { sleep(20); echo \"<p>Slept for 20 seconds.<\/p>\"; } ?>
\n<\/code><\/p>\n

You can also see this play out at WordPress 4.1.1’s Promise All Object Tutorial<\/a>.<\/p>\n

\n

Previous relevant Promise Object Primer Tutorial<\/a> is shown below.<\/p>\n

\"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