{"id":33645,"date":"2017-10-12T03:01:16","date_gmt":"2017-10-11T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33645"},"modified":"2017-10-12T07:41:30","modified_gmt":"2017-10-11T21:41:30","slug":"javascript-async-and-await-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-async-and-await-primer-tutorial\/","title":{"rendered":"Javascript async and await Primer Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript async and await Primer Tutorial<\/p><\/div>\n

Related Javascript asynchronous functionality to that of Promise All Object Tutorial<\/a>‘s Promise<\/a> object is async<\/a> and await<\/a> Javascript keywords.<\/p>\n

As you can see in our David Walsh inspired Javascript function introduced into the Promise object code of recent times …<\/p>\n


\n\/\/ Would take only 5000ms total!
\nasync<\/b> function parallel() {
\n const wait1 = get('\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleep.php?n=5');
\n const wait2 = get('\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleep.php?n=4');
\n await<\/i> wait1;
\n await<\/i> wait2;
\n return \"done!\";
\n}
\n<\/code><\/p>\n

… the async<\/b> keyword changes the modus operandi of the Javascript function it modifies, giving that Javascript function asynchronous capabilities, and the await<\/i> keyword kicks off (those) asynchronous “definitions of tasks to do”.<\/p>\n

In addition, we have introduced a second<\/i> timer via setTimeout<\/i><\/a> so that the user can see what we do in context, and what we do today with this async<\/b> and await<\/i> “framework” is to play the same video twice, the second playing delayed by, as you may have guessed by now, 4 seconds. Why 4 seconds? As with all event-driven programming enthusiasts, you look for “intervention” (of code, via event) opportunities, and as you can see from the async<\/b> and await<\/i> “framework” code above, there is bound to be an intervention point as the PHP sleep.php<\/a> invocation of lesser duration (rather than first!), ends.<\/p>\n

In working this “duelling videos” in synchronicity idea, we discovered (via this useful link<\/a>, thanks) a cute #t=[seconds]<\/b><\/font> syntax we hadn’t used to start a homegrown video<\/a> and\/or audio<\/a> at a specified time position, and shown at the “event intervention”<\/font> place of code …<\/p>\n


\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 if (cell.indexOf(\"centre\") == -1) {
\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 if (1 == 1) {
\n document.getElementById('h' + cell).innerHTML+='<iframe id=\"i' + cell + '\" onload=\"ldone(' + \"'australian_lighthouses.php'\" + ');\" style=\"display:none;width:800px;float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php#selsort\" title=\"Lighthouses in Australia\"><\/iframe>';
\n } else {
\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 }
\n<\/b>
\n } else {
\n adate=new Date();
\n document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm Ajax response<br><br>';
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'dams_usa.htm Ajax response<br><br>';
\n damdone=true;
\n<\/b>
\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.htm IFRAME src<br><br>';
\n if (1 == 1) {
\n document.getElementById('h' + cell).innerHTML+='<iframe id=\"i' + cell + '\" onload=\"ldone(' + \"'dams_usa.htm'\" + ');\" style=\"display:none;width:' + wis + ';float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.htm\" title=\"Dams in the USA\"><\/iframe>';
\n } else {
\n document.getElementById('h' + cell).innerHTML+='<iframe onload=\"ldone(' + \"'dams_usa.htm'\" + ');\" style=\"width:' + wis + ';float:left;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.htm\" title=\"Dams in the USA\"><\/iframe>';
\n }
\n }
\n if (cell == \"right\") {
\n cell=\"centre\";
\n } else {
\n cell=\"right\";
\n }
\n } else {
\n adate=new Date();
\n if (cell == 'centre') {
\n document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + 'sleep.php?n=75 Ajax response<br><br>';
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'sleep.php?n=75 Ajax response<br><br>';
\n\t document.getElementById('ileft').style.display='block';
\n\t document.getElementById('iright').style.display='block';
\n\t } else {
\n document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + 'sleep.php?n=' + cell.replace('centre','') + ' Ajax response<br><br>';
\n if (cell.indexOf('4') != -1) {
\n <\/font>document.getElementById('hleft').innerHTML='<video controls=\"controls\" onended=\"atend(this);\" autoplay=\"autoplay\" id=\"vleft\"><source id=\"vsource\" src=\"\/\/www.rjmprogramming.com.au\/Mac\/ImageFit_Paintbrush.m4v#t=4<\/b>\" type=\"video\/mp4\"><\/source><\/video>'; <\/font>
\n document.getElementById('hright').innerHTML='<video controls=\"controls\" onloadstart=\"atstart(this);\" onended=\"atend(this);\" autoplay=\"autoplay\" id=\"vright\"><source src=\"\/\/www.rjmprogramming.com.au\/Mac\/ImageFit_Paintbrush.m4v#t=4<\/b>\" type=\"video\/mp4\"><\/source><\/video>';
\n }<\/font>
\n cell=cell.replace('centre4','centre05').replace('centre5','centre04').replace('centre0','centre');
\n\t }
\n }
\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<\/code><\/p>\n

To wind up the “information flow” we gave the videos onended<\/i><\/a> event places, thanks to this webpage’s advice<\/a>, thanks, to say when the videos finish, with its imperfect synchronicity, but “often will be to the same second” timer time.<\/p>\n

Here is the amended HTML and Javascript you could call promises_test.htm<\/a> and here is what changed for async and await usage<\/a>. The relevant live run<\/a> link is here, or is that there<\/font>.<\/p>\n

Stop Press<\/font><\/i><\/b><\/p>\n

We found we could improve “imperfect synchronicity” by effectively resetting the “earlier started” video at the same time the delayed video starts.<\/p>\n

\n

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

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