We've just finished up on a long discussion about how our applications really architected.
We spoke about how it's working behind the scenes and we also refactored some areas to make sure that
our app works well and both the production and development environments.
Now we're going to start to transition to moving on the front end of our application very shortly.
But before we do there's one last thing I want to talk about that's going to be very applicable on both
the back end and front end of our application.
So we're going to be discussing is a little new piece of javascript syntax that's included with the
2017 release of javascript.
If you recall when we put together our services passport G-S file.
So here is the services passport that japes file.
When we were working on the Google strategy the Google strategy we put together that second argument
to the strategy which was the callback function inside of here.
We made use of promises with our request to the database to handle this sort of asynchronous nature
of our code.
Now when we put this code together I said several times hey if you don't really know promises that's
totally fine because we're going to refactor this anyways.
This is what I'm talking about.
OK.
We're going to do or we're going to learn this new syntax right now and then we're going to come back
to this snippet of code and refactor it to use this new type of syntax that's going to allow us to kind
of skirt really dealing with promises directly.
Now this new syntax that we're going to use is going to be used on both the back end and the front ends
of our application.
And so obviously it's really important that we have a reasonable understanding of what this new syntax
is doing for us.
OK.
So here's how we're going to learn about it.
We are going to create a new little snippet of code just a little test function completely outside of
our project.
So we're going to write a little code completely outside of our project.
We're going to test it.
We're going to work it with it a little bit.
We're going to learn how this new syntax works.
And then after we finish that we will come back to this arrow function right here and refactor it to
use this new syntax.
So that's our goal.
So with that in mind I'm going to create a new file inside of my code editor.
We're not going to save this file to our project.
So you can write this code anywhere you want.
We're not going to save it.
This is just a location where we can write a little bit of sample code that's all mixture I'm writing
in javascript like so.
OK.
So this is we're going to write our sample code now.
I'm having.
This is going to be like a little bit tough to go through because we're going to kind of cover a couple
of different topics at once.
But hey just believe me at the end everything will become clear.
So for this sample snippet of code for this little test function I'm going to say that we want to write
a function to retrieve a blob of Jason.
Some of the words make an Ajax request.
So I want to write a function that's going to make an Ajax request to make the actual request.
We are going to use the fetch so use the fetch function the fetch function is available with default
javascript as a part of the standard library as of E.S. 2015.
So we can use the fetch function to make Ajax requests to arbitrary end points from any web server out
in existence.
So in short I want to write a function that's going to make an Ajax request to receive some amount of
information and I want internally to use the fetch API or the fetch function.
So before we make an actual Ajax request we have to have an actual u r l to make the request to.
So let's figure that part out first and then we'll write this actual function inside my browser.
I'm going to open up a new tab and navigate to rally coding doc Roku app dot com slash API slash music
albums and all pieces inside my code editor so you can read it very easily in just a second.
So as you can see if we make a request to this route right here we'll get back some arbitrary blob of
some so I can go over to my code editor and just so you can read it easily.
I'm going to paste the link right here.
So make sure that you can access this link and when you access it you should see a big old blob of sun
appear in the browser.
One thing I want to point out in particular notice that it's Heroku app dot com.
It's not Heroku dot com.
OK.
All right.
So we've got our you are.
We are going to write our function now.
And internally it's going to use the fetch function.
So I'm going to write my function.
I'm going to call it fetch albums because we are fetching data on some music albums and inside this
function we will use the fetch API to make a request you are route right here.
Now here's the catch.
Whenever we make a request with fetch fetch returns a promise.
That promise is resolved with an object that represents the underline request.
Now remember any time we work with a promise to get kind of a little notification or a little callback
that the promise has been resolved we'd chain on a dot then statement like so this then will be called
with the request coming from the original fecche call right here.
So we usually receive that as an argument called rez short response and then to read the actual Jaison
data that we retrieved from this API from this route right here.
We call rez Jaison like so and make sure you get the set of parentheses.
So this is kind of how the fecche API works and returns this response object that represents the underlying
requests for the underlying response to actually work with the real data that got returned.
We have to call redstart Jaison which returns a promise of its own that is resolved after the sun in
the request is ready for us to work with.
So to get access to the actual Jaison is resolved or that is actually returned with this request would
change on a another then that will be called with the case on data that we care about and so at that
point we can do whatever we want with the information that was returned.
So in this case I'll just cancel it like so.
Finally underneath the function declaration.
I'll save fetch albums like that.
OK so now I want to test out this little code snippet inside the browser.
Now for we test it.
I want to tell you right now this snippet of code is only going to work for you if you are using a relatively
modern browser that has support for fetch.
So if you are using Chrome you're going to be fine.
If you're using Internet or Microsoft edge you're probably would be OK if you're using IEEE ten or nine
for some reason.
You're probably going to see an error message when we try this out.
OK so just now we're going to copy this entire blob right here.
I will change back over to the browser.
I'm going to open up the developer console.
I'm going to go to the counsel tab.
I will pass the sniff bit of code or run it and then after a little pause I should see a console log
with the five albums that are returned from the CPI.
OK all right so at this point we've looked at and we've seen how traditional fecche requests work.
Something that's probably not that unusual to you.
So at this point in time we have essentially made some type of asynchronous request that returns a promise
when the request is successful.
We can change or we can change it then and pass the function.
That function will be called if the request is successfully resolved so that then is essentially our
opportunity to get a little callback something that says hey responses back here you can now work with
it.
Now applying this to the actual fetch call we just did.
So we called fetch that returned promise and we changed on the first dot.
Then because Vetri resolves with an object representing the underlying request to get the actual data
we have to call resident Giese on that returns a nother promise and so to get a little notification
when that promise is resolved we'd chain on a second then which we can then use to get access to the
real underlying data.
So hopefully at this point I just want to say you know make sure we're really on the same page on fetch.
Make sure we both understand why there's the two then statements.
I think that at this point we can agree and say OK yeah this makes sense we understand what's going
on.
So now let's do a little refactor to this function.
That's going to make use of this new.
Yes 20:17 syntax.
Now the sole purpose of this new yes 20:17 syntax is just to make working with promises a little bit
easier and a little bit more straightforward.
Behind the scenes we're still working with promises.
Fetch is still going to return a promise.
We still are technically defining a function kind of we're still defining a block of code that will
be only executed after the fetch statement is read or after the request is resolved.
So we're still working with promises behind the scenes.
The only difference is that this new E-S 20:17 syntax makes it visually look to our eyes like your eyes
and my eyes like we are writing code that is a little bit more synchronous in nature.
OK so let's Jorie factor and see what it looks like.
I'm going to start off by copying the fecche albums function and then pasting it right underneath the
existing one just so we can kind of compare and contrast the two.
So I'm going to comment out the existing one and then we're going to do our factor to use this new syntax
on the new function.
Or on this copy of it.
OK.
The new syntax just in case I didn't actually mention it is called async.
Oh wait it is specifically for handling a synchronous code inside of any type of function.
So here is how we use it we'll do it step by step.
First we identify the function inside of our code base that contains some type of asynchronous requests
or some type of asynchronous operation.
And so in this case we've got one function.
Here it is right here.
So we have identified the function that contains some asynchronous code.
Step one is to put the async keyword in front of that function declaration.
So I'm going to say async space function this essentially tells our javascript interpreter that the
function that we are about to declare contains some asynchronous code.
Now step two is to identify all the different promises that are created within that function.
In this case we have two different promises.
We have the one that is being created by calling Fettes right here.
And then we have the second promise that is being created by calling redstart Jaison in front of each
of those promises we're going to add the a weight keyword.
So going to find fetch I mean to say oh wait I'm going to find the red dot Jay song I'm going to delete
everything around it and condensed down to be just restaurant Jaison and then put the Awake key word
in front that finally I'm going to assign the resolve value of fetch and juice on to some intermediate
values.
So in front of fetch I'll say Konst rez equals a weight fetch and I'll say Konst Jaison equals a wage
restaurant Jason.
And then finally I will refactor the rest of the function to look essentially synchronous in nature.
So delete the entire Then statement down here and say simply Konst a log dot Jaison like so.
And that's essentially the entire refactor right there.
So again we first off identify any function our code base that uses some type of asynchronous code or
some type of promise inside of it.
We put down the async Ewert we put the await key word in front of any statement that produces a promise.
And then in front of a weight the promise we put down some variable to assign the resolve result of
the promise too.
So remember before fecche was being resolved with the response we are now signing that to the rest variable
right here await wait Jaison was being resolved with some amount of Jaison.
So we are assigning that to the Jason on variable right here.
Now when we compare these two snippets of code I can very easily say that this one is a little bit easier
to understand what's going on.
Right.
If you forget this entire like a single weight stuff if you just forget the fact that it's new.
Just looking at these two functions I think it's very easy to say this is easier to understand as far
as like kind of what it's doing we're essentially making request assigned to this very well calling
Jaison or the Jason function on that variable assigning the result to a song and then we cancel log
out the response.
This snippet up here unless you really know what's going on with promises.
It's a little bit harder to understand.
And one of the hardest parts understand is understanding that the promise that gets returned from resident
Jason right here has to be resolved before the second dot.
Then Stayton is called like that's a very intricate detail promises and how promises work.
So again we make use of this syncopate syntax just to make our code a little bit more legible.
Now behind the scenes all the same promise stuff is still going on.
The interpreter is still going to make the Fettes request right here.
And then it's not going to execute any other code inside the function.
So we're still going to make that request right here and then essentially the interpreter is going to
go off and do some other work.
It's not going to immediately just like pause an execution right here.
It's not going to actually.
Oh wait we are not like sleeping or anything like that.
Everything is still working the way that it was before.
We are just using a slightly different syntax.
OK.
So let's now test this out.
I'm going to copy this entire snippet right here.
And again if you are not using an up to date version of chrome if you're using an old version of Internet
Explorer if you're using an older version of Firefox if you're using Safari this code right here is
probably going to throw an air for you.
So you have to be using Chrome.
And they recently up to date version of chrome for this code to work.
So I'm going to copy this code.
I'm going to go back over to my console and to clear out the log.
And I'll paste it and run it and then just as before I still get out the console log.
So clearly the two are equivalent in behavior.
They work essentially the same way.
We have only added in this new type of syntax for handling these asynchronous requests.
Now the last thing I want to say here is that we are not only restricted to using the async await syntax
with functions that are declared using the function keyword.
We can also use aero functions if we choose.
So let's refactor this to use an arrow function instead.
I'll say Konst fetch albums equals a wait and then I place the function that I want to mark as being
a synchronous nature.
I put away my mistake state to be async like so.
So we say async and then the function that is going to be containing some amount of asynchronous code.
So I'm going to now copy all this when I go back over to the browser.
I am going to refresh the page if I pasted the code that we just added and execute it.
We would get a little bit of an error because I'm using the Konst key word here and whenever we use
Konski word remember we can only declare the variable once and so if we were out right now we would
see a little error message.
But that's because of the Konst keyword.
So refresh the entire page.
I will then paste that statement and we still get the same result as before we get.
So that's pretty much it for the async wait syntax.
Again the takeaway here is that it is still behaving the exact same way behind the scenes.
The only difference is that it gives us this slightly improved syntax that makes our code look a little
bit more synchronous in nature.
Now before we take a pause.
One last thing I want to do I want to open up the Babel G-S repo or Simmie REPL Songun navigate to Babel
JIANG-STEIN IO.
I'm going to find the.
Try it now link.
So try it out right here and then this gives us a little tool where we can paste some yes 20 anything.
So yes 20:17 whenever you want code on here and then see the transpired result on the right hand side.
So I'm going to paste the code that we just wrote and when I do so you'll notice that it like actually
executes the code if you have evaluate appeared checked.
But when I paste the code we can inspect the result over here.
So this is what you actually see after that advantage.
After that a syncopate syntax has been parsed by Babel and translated into compatible S-5 code.
So over on the right hand side you'll see that all of this async Kuwait stuff gets massively expanded
over here like tremendous amount of code is generated by using that async quite syntax.
And this is everything that it takes to actually do this kind of fancy syntax.
Now one thing you might notice in here is this function called async generator.
If you look very carefully at it and it's one very long line you can see that it is still creating a
promise behind the scenes.
So here is like new promise and it is still like essentially doing something with the promise.
So your like promised resolve.
Blah blah blah blah blah.
And all this stuff.
So there's still promises behind the scenes.
But at the end of the day it's really just cause.
Essentially at the end of the day remember we are just using some syntactic sugar.
It is not necessarily transforming the way that javascript is working right now.
OK so enough of talking about this.
Again we're going to be making use of async await throughout this course.
A tremendous amount and in fact we're probably not going use promises again at all.
We might kind of write out the next request or two as a promise and then refactor it to use async wait
just to make sure we're on the same page.
But in general we will use async away a lot.
So at this point I want to take a break when we come back to the next section.
We're going to go back to that passport file and we're going to refactor all of this database queries
stuff to instead use the new async await syntax.
So a quick break.
We'll come back and do a little refactor.
So see you in just a second.