In this video we're going to head back into index dot J S and use async await to improve the syntax
for all six of the routes we currently have set up.
Then as we add more routes in the future of course we'll use async await from the start.
Now that we know how it works and how we can use it.
So the first thing we're going to do together is make changes to all of the user related routes we have
post users get users and get an individual user.
Then as your challenge for the video you'll be converting the task related routes to use async await
on your own.
So let's go ahead and get things started.
Up top with our very first route and I am going to start the server from the terminal right here we
can use NPM run dev to start up our little development server which uses node mine and we're also going
to spend our time in post man.
We want to make sure we fire off requests to the endpoints as we change them so we can confirm they're
still working as expected.
Let's go ahead and kick things off by moving over to postmen and heading over to our post request for
creating a new user.
Now right here what I have is an invalid operation.
We'll go ahead and change all of this in a moment.
For now let's start with some code changes to what we have right here online 11.
The first thing we need to do is mark some function as a sink.
Remember we cannot use a wait outside of an async function.
That means I can't use a weight right here because I'm not in a function let alone in a sync function.
And it also means that I currently can't use a weight right here because while I am in a function I'm
not in an async function.
So the first thing we're going to do is take this function the one we passed to express and we're going
to market as a sync by adding a sync right up front like we have done a few times already.
Now we know when we just add that async definition it changes the behavior of the function the function
goes from returning whatever value you return to always returning a promise.
We saw that a couple of videos ago.
Now the good news is that Express doesn't use the return value from this function anyways.
At no point were we returning anything.
EXPRESS Does not care what we return.
Instead we use request and response to tell express what we want to do.
So in this case we've added the a sync functionality without changing the behavior at all.
Now though we do want to refactor the code down below.
So I'm going to take all of this code and I'm going to comment it out.
We're going to recreate it using a wait right here and the first thing we're going to do is await the
promise that comes back from calling that save method.
So that's going to be the await keyword which I can now use since I am in an async function.
And from here the promise is available it comes back from user dot save.
Excellent.
So at this point we have saved the user and everything that comes after is only going to run once the
user was saved either successfully or unsuccessfully.
Now we know the code right here on this next line is only going to run if the promise above is fulfilled.
If it's rejected as we saw previously the rest of the function is going to stop.
We saw that in the playground example we had that 9 async await file in here if you remember we had
negative numbers which caused problems.
And when we added them everything afterwards never ran.
We can actually handle individual errors from individual promises using a standard tri catch statement
like we would with regular javascript code.
So right here let's go ahead and set that up.
We are going to try to run this code block if anything in that code block throws an error.
We will use catch to catch it right here.
We can access to the error using the following syntax.
So what we can do is take our call to save where we use a wait and we can move that into the try block.
Now we can actually do one thing or another the code right here just below is only going to run if these
save promise was fulfilled.
If it throws an error code in catch will run so we can still do one of two things right here.
If things go well response dot status to a 1 dot send sending back that user then down below if catch
does run response dot status setting that equal to a four hundred.
And once again sending back the error.
So right here we have the exact same code we had down below with async await.
Now as we do more than one asynchronous thing in a given function the advantages we get are going to
get greater and greater.
So right here we can remove the old code we have in place and we can go ahead and do this exact same
thing for our other handlers as well.
Before we do let's make sure that the Post users request is still working as expected.
What I'm going to do is save this file and we're going to head over to postmen and we'll run a few different
tests.
I'll send some bad data and I'll send some good data.
Right here I have some bad data.
The password is too short.
I'm going to go ahead and send that off and look at their response.
Right here I'm still getting a four hundred and I'm still seeing my error down below.
Now let's fix that with a valid password.
I'll use red.
One two three four five with an exclamation mark on the end.
I'll go ahead and send that off now.
I would expect the save promise to be fulfilled which means I should get my 2 0 1 back.
I send it off and that's exactly what I get.
A new document was added to the user's collection in the database.
And I'm seeing the correct response body and the correct status code.
Now that we have one of these knocked out let's go ahead and do the same thing for the other two.
Then we'll move in to the challenge for the video right here once again we start off by marking this
function as a sync and once we have that in place we move on down below.
Now in this case we are getting a fulfilled value we actually want to access unlike what we were doing
up above.
So we will start by setting up try catch
and once we have that in place we'll go ahead and add some code inside of track.
I'm going to try to find all of those users and I'm going to store them in this user's constant I'm
defining right here.
We are going to await the promise that comes back from user dot find calling it exactly like we had
called it down below.
Now if this line of code runs then we got our users and we can use response dot send to send them back
if this code runs then something went wrong and we will use response dot status to set up a five hundred
status code and I'll use send to send back an empty response.
The status code being the signal right here we can go ahead and remove the old code and this one is
now converted.
We'll do the same thing down below for the last user related route.
I'm going to start by marking it as a sync then we'll go through the refactoring process.
Once again I will go ahead and comment out everything we had before and we'll start with our tri catch
statement
inside of tri.
We're going to start to do the asynchronous things we are trying to do which is to find a user by the
I.D. and we're gonna get them back potentially so const right here user equals a weight user dot find
by I.D..
We are going to call that passing in these same variable.
We were passing in.
Down below.
And once we have this in place we know that things went well.
If this code runs.
Now remember user might not exist if we did not find a user with that I.D. this code is still going
to run.
It's up to us to potentially use a little conditional logic to get the exact right information back
to the requester.
So once again I can choose to use an if statement if there is no user.
We'll go ahead and do one thing in this case.
I'll do exactly what I was doing down below.
I can use return to stop the function execution.
Then I can go ahead and use response dot status sending an equal to a 4 0 4.
And from there I'll go ahead and use send to send things off down below.
If we did not get a empty user then we got a real one and we'll use response dot send to send them back.
Last up inside of catch.
What do we have.
We have our error handler just sending back that 500 response dot status.
Five hundred dots and excellent.
So now that we have this in place we have refactor it out they need to use extra callbacks for all of
our functions.
Now at first it might seem like a regression.
We have code that's now harder to understand than before.
But I promise that's just because it's a new syntax.
We've worked with promises for longer.
So that code looks a bit more familiar.
Here we are indeed using async await which is something a bit new but after a short amount of time as
we progressed through the class I promise this syntax will become very familiar as well.
And it'll feel really natural.
And as you start to create more complex root handlers you're going to be able to do that with ease using
a wait instead of needing to use promise chaining.
So now let's go ahead and test out the second two routes we modified over in postmen.
Then we'll move on to the challenge over inside of the postman app.
I'm going to start with reading all users right here I have read users.
I'll go ahead and fire that off and down below.
I do indeed get my users back.
Now I'm going to go ahead and also grab one of those ideas and I'll use that idea for my read user call.
Actually I already have an idea up there so I should be able to just send this off and right here I'm
getting the two hundred which is great if I change the last character from a one to a two and I send
that off.
We now get a 4 0 4 which is correct.
And there we go.
We have those three user related routes and all are working as expected.
Now let's go ahead and dive into what I'd like you to do with the tasks roots down below.
The process is going to be exactly the same as what we just got done.
Now there's not a heck of a lot to say about this challenge.
Your goal is to refactoring the task routs and step one is to refactor them step to test things out
use postmen to make sure all of the requests are still working.
All right take some time to get that done.
Test your work and when you're done come back and click play
how'd that go.
Let's go ahead and kick things off with the first round.
This is for creating a new task.
I am going to mark that as a sink right here and we are going to take advantage of that functionality
down below.
We'll start by setting up try catch
and once we have that in place we can await the call to save right here a wait.
Task dot save calling it exactly as we had done before.
Now if this code runs we know the task was saved correctly so response dot status to a 1 to alert them
that something was created.
Then we use send to send the task data back down below.
If things go bad we can use response dot status sending it up to a four hundred and right here will
you send to send back the error so we can see exactly why the task couldn't be created successfully
as an example.
Maybe we left off the description with this in place.
We can now go ahead and test this out or continue on to the other ones.
I'll go ahead and continue on with the code and test them all out at the end.
Right here we have our next handler.
I am going to convert this over to an async function and we're going to work through that process once
again setting up try catch
once we have that in place we'll start by creating our tasks variable to store all of the tasks that
we've found.
Then we're gonna go ahead and use await to await a call to task.
Find just like we had down below.
If this line of code runs then the promise was fulfilled and we can go ahead and use response.
Dot send to send the tasks back.
If something went wrong we'll send back a 500 response dot status.
Five hundred and right here we will use dot sent.
Now that we have that replaced with async await there is just one more left.
That is the one where we get the individual task by its I.D..
So once again we need to start by marking that function as a sync and setting up try catch sense whenever
we run code.
We want to make sure we are handling errors.
It's not a good idea to just let those fly away into the darkness and not alert users as to what's going
on right here.
What are we trying to do.
Well I am trying to get a task so I'll create that task variable and I'll await the call to task dot
find by I.D. passing in the I.D. that we got from the U R L parameter.
Now once we have the task we want to make sure it actually exists and we have the code down below that
gets that done.
You could rewrite it or you could repurpose it taking it from down below and pasting it up above as
it's gonna be exactly the same.
Next up we have the catch.
Call the catch.
Call is gonna do the same thing that it was doing down below so we can repurpose that code as well.
And finally we can remove the old promise.
Example.
So there we go.
We have all of our methods for Express relying on async await.
Now the last thing to do was to test those three out just to make sure they're working as expected.
I'll be removing the challenge comments first and saving the final.
Excuse me not saving the final saving the file for the final time over inside of postmen.
Let's start by trying to create a task.
So right here we have that post request and we have a valid setup.
I'm gonna send that off and right here the task was created.
If I were to mess that up providing nothing for the description as an example I would expect things
to fail and down below.
They do so from here I can read all of the tasks.
I'll go ahead and do that by firing that operation off right here.
I can see I do have to.
Let's go ahead and grab one of those ideas so we can use it to test that last handler.
Now since we have all of this in a collection it's really easy to navigate between everything right
here.
I'm going to swap out that old I.D. with the new I.D. I will click send to fire that off and we do indeed
get things working down below.
And once again if I was to mess up that last character right here I can see I get the 4 0 4.
So what we've done in this video is we've converted all of our app express handlers over to async and
await in the next video we're going to continue on creating the other ones we need for the application.
And as we create those we'll be using async await from scratch.
I'm excited to get to that.
So let's jump right in to the next video.