1 00:00:00,210 --> 00:00:07,110 In this video we're going to head back into index dot J S and use async await to improve the syntax 2 00:00:07,110 --> 00:00:10,940 for all six of the routes we currently have set up. 3 00:00:10,980 --> 00:00:15,930 Then as we add more routes in the future of course we'll use async await from the start. 4 00:00:15,930 --> 00:00:18,780 Now that we know how it works and how we can use it. 5 00:00:18,810 --> 00:00:24,690 So the first thing we're going to do together is make changes to all of the user related routes we have 6 00:00:24,690 --> 00:00:29,340 post users get users and get an individual user. 7 00:00:29,340 --> 00:00:35,130 Then as your challenge for the video you'll be converting the task related routes to use async await 8 00:00:35,280 --> 00:00:36,330 on your own. 9 00:00:36,330 --> 00:00:38,290 So let's go ahead and get things started. 10 00:00:38,310 --> 00:00:45,570 Up top with our very first route and I am going to start the server from the terminal right here we 11 00:00:45,570 --> 00:00:53,280 can use NPM run dev to start up our little development server which uses node mine and we're also going 12 00:00:53,280 --> 00:00:55,440 to spend our time in post man. 13 00:00:55,560 --> 00:01:01,710 We want to make sure we fire off requests to the endpoints as we change them so we can confirm they're 14 00:01:01,710 --> 00:01:03,820 still working as expected. 15 00:01:03,840 --> 00:01:10,410 Let's go ahead and kick things off by moving over to postmen and heading over to our post request for 16 00:01:10,410 --> 00:01:12,780 creating a new user. 17 00:01:12,780 --> 00:01:16,800 Now right here what I have is an invalid operation. 18 00:01:16,800 --> 00:01:19,560 We'll go ahead and change all of this in a moment. 19 00:01:19,630 --> 00:01:24,930 For now let's start with some code changes to what we have right here online 11. 20 00:01:24,930 --> 00:01:29,090 The first thing we need to do is mark some function as a sink. 21 00:01:29,100 --> 00:01:33,420 Remember we cannot use a wait outside of an async function. 22 00:01:33,450 --> 00:01:39,630 That means I can't use a weight right here because I'm not in a function let alone in a sync function. 23 00:01:39,630 --> 00:01:45,300 And it also means that I currently can't use a weight right here because while I am in a function I'm 24 00:01:45,300 --> 00:01:47,450 not in an async function. 25 00:01:47,490 --> 00:01:53,340 So the first thing we're going to do is take this function the one we passed to express and we're going 26 00:01:53,340 --> 00:01:59,960 to market as a sync by adding a sync right up front like we have done a few times already. 27 00:01:59,970 --> 00:02:06,750 Now we know when we just add that async definition it changes the behavior of the function the function 28 00:02:06,750 --> 00:02:12,150 goes from returning whatever value you return to always returning a promise. 29 00:02:12,150 --> 00:02:14,530 We saw that a couple of videos ago. 30 00:02:14,580 --> 00:02:20,510 Now the good news is that Express doesn't use the return value from this function anyways. 31 00:02:20,520 --> 00:02:23,120 At no point were we returning anything. 32 00:02:23,210 --> 00:02:26,130 EXPRESS Does not care what we return. 33 00:02:26,130 --> 00:02:30,860 Instead we use request and response to tell express what we want to do. 34 00:02:30,870 --> 00:02:37,170 So in this case we've added the a sync functionality without changing the behavior at all. 35 00:02:37,170 --> 00:02:40,370 Now though we do want to refactor the code down below. 36 00:02:40,440 --> 00:02:44,100 So I'm going to take all of this code and I'm going to comment it out. 37 00:02:44,190 --> 00:02:50,310 We're going to recreate it using a wait right here and the first thing we're going to do is await the 38 00:02:50,310 --> 00:02:54,340 promise that comes back from calling that save method. 39 00:02:54,360 --> 00:03:00,810 So that's going to be the await keyword which I can now use since I am in an async function. 40 00:03:00,810 --> 00:03:06,120 And from here the promise is available it comes back from user dot save. 41 00:03:06,120 --> 00:03:06,750 Excellent. 42 00:03:07,170 --> 00:03:13,620 So at this point we have saved the user and everything that comes after is only going to run once the 43 00:03:13,620 --> 00:03:17,580 user was saved either successfully or unsuccessfully. 44 00:03:17,580 --> 00:03:24,480 Now we know the code right here on this next line is only going to run if the promise above is fulfilled. 45 00:03:24,480 --> 00:03:29,490 If it's rejected as we saw previously the rest of the function is going to stop. 46 00:03:29,520 --> 00:03:36,810 We saw that in the playground example we had that 9 async await file in here if you remember we had 47 00:03:36,810 --> 00:03:39,070 negative numbers which caused problems. 48 00:03:39,090 --> 00:03:42,760 And when we added them everything afterwards never ran. 49 00:03:42,780 --> 00:03:50,310 We can actually handle individual errors from individual promises using a standard tri catch statement 50 00:03:50,340 --> 00:03:53,490 like we would with regular javascript code. 51 00:03:53,490 --> 00:03:56,080 So right here let's go ahead and set that up. 52 00:03:56,190 --> 00:04:02,510 We are going to try to run this code block if anything in that code block throws an error. 53 00:04:02,580 --> 00:04:05,610 We will use catch to catch it right here. 54 00:04:05,610 --> 00:04:09,540 We can access to the error using the following syntax. 55 00:04:09,540 --> 00:04:17,430 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. 56 00:04:17,460 --> 00:04:24,960 Now we can actually do one thing or another the code right here just below is only going to run if these 57 00:04:24,960 --> 00:04:27,440 save promise was fulfilled. 58 00:04:27,510 --> 00:04:34,200 If it throws an error code in catch will run so we can still do one of two things right here. 59 00:04:34,200 --> 00:04:43,620 If things go well response dot status to a 1 dot send sending back that user then down below if catch 60 00:04:43,650 --> 00:04:49,470 does run response dot status setting that equal to a four hundred. 61 00:04:49,470 --> 00:04:52,350 And once again sending back the error. 62 00:04:52,350 --> 00:04:57,780 So right here we have the exact same code we had down below with async await. 63 00:04:57,780 --> 00:05:03,560 Now as we do more than one asynchronous thing in a given function the advantages we get are going to 64 00:05:03,560 --> 00:05:05,230 get greater and greater. 65 00:05:05,240 --> 00:05:11,360 So right here we can remove the old code we have in place and we can go ahead and do this exact same 66 00:05:11,360 --> 00:05:14,750 thing for our other handlers as well. 67 00:05:14,750 --> 00:05:20,560 Before we do let's make sure that the Post users request is still working as expected. 68 00:05:20,570 --> 00:05:26,060 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 69 00:05:26,060 --> 00:05:26,910 tests. 70 00:05:26,930 --> 00:05:30,290 I'll send some bad data and I'll send some good data. 71 00:05:30,380 --> 00:05:32,090 Right here I have some bad data. 72 00:05:32,090 --> 00:05:34,250 The password is too short. 73 00:05:34,310 --> 00:05:37,520 I'm going to go ahead and send that off and look at their response. 74 00:05:37,670 --> 00:05:42,880 Right here I'm still getting a four hundred and I'm still seeing my error down below. 75 00:05:42,890 --> 00:05:45,520 Now let's fix that with a valid password. 76 00:05:45,590 --> 00:05:46,550 I'll use red. 77 00:05:46,560 --> 00:05:50,870 One two three four five with an exclamation mark on the end. 78 00:05:50,870 --> 00:05:53,090 I'll go ahead and send that off now. 79 00:05:53,120 --> 00:05:59,540 I would expect the save promise to be fulfilled which means I should get my 2 0 1 back. 80 00:05:59,540 --> 00:06:01,910 I send it off and that's exactly what I get. 81 00:06:02,420 --> 00:06:06,580 A new document was added to the user's collection in the database. 82 00:06:06,680 --> 00:06:11,840 And I'm seeing the correct response body and the correct status code. 83 00:06:11,840 --> 00:06:17,180 Now that we have one of these knocked out let's go ahead and do the same thing for the other two. 84 00:06:17,210 --> 00:06:22,340 Then we'll move in to the challenge for the video right here once again we start off by marking this 85 00:06:22,340 --> 00:06:27,100 function as a sync and once we have that in place we move on down below. 86 00:06:27,110 --> 00:06:32,810 Now in this case we are getting a fulfilled value we actually want to access unlike what we were doing 87 00:06:32,840 --> 00:06:33,890 up above. 88 00:06:33,890 --> 00:06:36,380 So we will start by setting up try catch 89 00:06:39,290 --> 00:06:43,740 and once we have that in place we'll go ahead and add some code inside of track. 90 00:06:43,850 --> 00:06:49,520 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 91 00:06:49,520 --> 00:06:51,340 defining right here. 92 00:06:51,470 --> 00:06:57,830 We are going to await the promise that comes back from user dot find calling it exactly like we had 93 00:06:57,830 --> 00:06:59,480 called it down below. 94 00:06:59,480 --> 00:07:07,130 Now if this line of code runs then we got our users and we can use response dot send to send them back 95 00:07:07,430 --> 00:07:14,930 if this code runs then something went wrong and we will use response dot status to set up a five hundred 96 00:07:14,930 --> 00:07:19,220 status code and I'll use send to send back an empty response. 97 00:07:19,280 --> 00:07:26,000 The status code being the signal right here we can go ahead and remove the old code and this one is 98 00:07:26,000 --> 00:07:27,170 now converted. 99 00:07:27,170 --> 00:07:31,630 We'll do the same thing down below for the last user related route. 100 00:07:31,640 --> 00:07:36,730 I'm going to start by marking it as a sync then we'll go through the refactoring process. 101 00:07:36,740 --> 00:07:44,370 Once again I will go ahead and comment out everything we had before and we'll start with our tri catch 102 00:07:44,370 --> 00:07:45,030 statement 103 00:07:48,680 --> 00:07:49,700 inside of tri. 104 00:07:49,730 --> 00:07:55,610 We're going to start to do the asynchronous things we are trying to do which is to find a user by the 105 00:07:55,640 --> 00:08:06,590 I.D. and we're gonna get them back potentially so const right here user equals a weight user dot find 106 00:08:06,710 --> 00:08:08,210 by I.D.. 107 00:08:08,360 --> 00:08:12,230 We are going to call that passing in these same variable. 108 00:08:12,230 --> 00:08:13,150 We were passing in. 109 00:08:13,160 --> 00:08:14,240 Down below. 110 00:08:14,360 --> 00:08:17,810 And once we have this in place we know that things went well. 111 00:08:17,810 --> 00:08:19,490 If this code runs. 112 00:08:19,490 --> 00:08:26,780 Now remember user might not exist if we did not find a user with that I.D. this code is still going 113 00:08:26,780 --> 00:08:27,350 to run. 114 00:08:27,590 --> 00:08:33,590 It's up to us to potentially use a little conditional logic to get the exact right information back 115 00:08:33,710 --> 00:08:34,980 to the requester. 116 00:08:35,000 --> 00:08:40,220 So once again I can choose to use an if statement if there is no user. 117 00:08:40,220 --> 00:08:42,740 We'll go ahead and do one thing in this case. 118 00:08:42,740 --> 00:08:45,500 I'll do exactly what I was doing down below. 119 00:08:45,500 --> 00:08:49,490 I can use return to stop the function execution. 120 00:08:49,490 --> 00:08:55,800 Then I can go ahead and use response dot status sending an equal to a 4 0 4. 121 00:08:56,030 --> 00:09:01,620 And from there I'll go ahead and use send to send things off down below. 122 00:09:01,730 --> 00:09:09,140 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. 123 00:09:09,140 --> 00:09:10,860 Last up inside of catch. 124 00:09:10,910 --> 00:09:11,930 What do we have. 125 00:09:11,930 --> 00:09:17,890 We have our error handler just sending back that 500 response dot status. 126 00:09:17,890 --> 00:09:22,490 Five hundred dots and excellent. 127 00:09:22,520 --> 00:09:28,460 So now that we have this in place we have refactor it out they need to use extra callbacks for all of 128 00:09:28,460 --> 00:09:29,570 our functions. 129 00:09:29,600 --> 00:09:32,860 Now at first it might seem like a regression. 130 00:09:32,900 --> 00:09:36,320 We have code that's now harder to understand than before. 131 00:09:36,470 --> 00:09:39,340 But I promise that's just because it's a new syntax. 132 00:09:39,350 --> 00:09:41,360 We've worked with promises for longer. 133 00:09:41,420 --> 00:09:43,500 So that code looks a bit more familiar. 134 00:09:43,580 --> 00:09:49,460 Here we are indeed using async await which is something a bit new but after a short amount of time as 135 00:09:49,460 --> 00:09:54,500 we progressed through the class I promise this syntax will become very familiar as well. 136 00:09:54,620 --> 00:09:56,240 And it'll feel really natural. 137 00:09:56,240 --> 00:10:02,690 And as you start to create more complex root handlers you're going to be able to do that with ease using 138 00:10:02,740 --> 00:10:06,550 a wait instead of needing to use promise chaining. 139 00:10:06,560 --> 00:10:12,070 So now let's go ahead and test out the second two routes we modified over in postmen. 140 00:10:12,110 --> 00:10:16,120 Then we'll move on to the challenge over inside of the postman app. 141 00:10:16,130 --> 00:10:20,820 I'm going to start with reading all users right here I have read users. 142 00:10:20,900 --> 00:10:23,480 I'll go ahead and fire that off and down below. 143 00:10:23,480 --> 00:10:26,120 I do indeed get my users back. 144 00:10:26,120 --> 00:10:33,310 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. 145 00:10:33,320 --> 00:10:39,110 Actually I already have an idea up there so I should be able to just send this off and right here I'm 146 00:10:39,110 --> 00:10:45,110 getting the two hundred which is great if I change the last character from a one to a two and I send 147 00:10:45,110 --> 00:10:45,670 that off. 148 00:10:45,680 --> 00:10:48,140 We now get a 4 0 4 which is correct. 149 00:10:48,140 --> 00:10:49,370 And there we go. 150 00:10:49,460 --> 00:10:54,680 We have those three user related routes and all are working as expected. 151 00:10:54,680 --> 00:11:00,530 Now let's go ahead and dive into what I'd like you to do with the tasks roots down below. 152 00:11:00,530 --> 00:11:04,390 The process is going to be exactly the same as what we just got done. 153 00:11:04,400 --> 00:11:07,250 Now there's not a heck of a lot to say about this challenge. 154 00:11:07,250 --> 00:11:14,270 Your goal is to refactoring the task routs and step one is to refactor them step to test things out 155 00:11:14,510 --> 00:11:18,380 use postmen to make sure all of the requests are still working. 156 00:11:18,380 --> 00:11:20,780 All right take some time to get that done. 157 00:11:20,870 --> 00:11:23,960 Test your work and when you're done come back and click play 158 00:11:27,950 --> 00:11:28,670 how'd that go. 159 00:11:28,700 --> 00:11:31,610 Let's go ahead and kick things off with the first round. 160 00:11:31,610 --> 00:11:33,530 This is for creating a new task. 161 00:11:33,530 --> 00:11:39,050 I am going to mark that as a sink right here and we are going to take advantage of that functionality 162 00:11:39,080 --> 00:11:40,310 down below. 163 00:11:40,310 --> 00:11:42,440 We'll start by setting up try catch 164 00:11:45,320 --> 00:11:50,940 and once we have that in place we can await the call to save right here a wait. 165 00:11:51,110 --> 00:11:55,680 Task dot save calling it exactly as we had done before. 166 00:11:55,700 --> 00:12:03,050 Now if this code runs we know the task was saved correctly so response dot status to a 1 to alert them 167 00:12:03,050 --> 00:12:04,780 that something was created. 168 00:12:04,790 --> 00:12:09,300 Then we use send to send the task data back down below. 169 00:12:09,320 --> 00:12:16,580 If things go bad we can use response dot status sending it up to a four hundred and right here will 170 00:12:16,580 --> 00:12:23,920 you send to send back the error so we can see exactly why the task couldn't be created successfully 171 00:12:24,190 --> 00:12:24,980 as an example. 172 00:12:25,120 --> 00:12:28,640 Maybe we left off the description with this in place. 173 00:12:28,720 --> 00:12:33,070 We can now go ahead and test this out or continue on to the other ones. 174 00:12:33,070 --> 00:12:37,570 I'll go ahead and continue on with the code and test them all out at the end. 175 00:12:37,570 --> 00:12:39,970 Right here we have our next handler. 176 00:12:40,030 --> 00:12:46,180 I am going to convert this over to an async function and we're going to work through that process once 177 00:12:46,180 --> 00:12:47,980 again setting up try catch 178 00:12:52,080 --> 00:12:58,170 once we have that in place we'll start by creating our tasks variable to store all of the tasks that 179 00:12:58,170 --> 00:12:59,350 we've found. 180 00:12:59,380 --> 00:13:04,000 Then we're gonna go ahead and use await to await a call to task. 181 00:13:04,080 --> 00:13:07,020 Find just like we had down below. 182 00:13:07,020 --> 00:13:12,770 If this line of code runs then the promise was fulfilled and we can go ahead and use response. 183 00:13:12,780 --> 00:13:16,070 Dot send to send the tasks back. 184 00:13:16,140 --> 00:13:20,940 If something went wrong we'll send back a 500 response dot status. 185 00:13:21,060 --> 00:13:25,330 Five hundred and right here we will use dot sent. 186 00:13:25,560 --> 00:13:30,230 Now that we have that replaced with async await there is just one more left. 187 00:13:30,240 --> 00:13:34,200 That is the one where we get the individual task by its I.D.. 188 00:13:34,200 --> 00:13:41,190 So once again we need to start by marking that function as a sync and setting up try catch sense whenever 189 00:13:41,190 --> 00:13:42,290 we run code. 190 00:13:42,330 --> 00:13:44,840 We want to make sure we are handling errors. 191 00:13:44,850 --> 00:13:50,670 It's not a good idea to just let those fly away into the darkness and not alert users as to what's going 192 00:13:50,670 --> 00:13:52,110 on right here. 193 00:13:52,110 --> 00:13:53,450 What are we trying to do. 194 00:13:53,460 --> 00:14:01,380 Well I am trying to get a task so I'll create that task variable and I'll await the call to task dot 195 00:14:01,380 --> 00:14:08,010 find by I.D. passing in the I.D. that we got from the U R L parameter. 196 00:14:08,010 --> 00:14:13,740 Now once we have the task we want to make sure it actually exists and we have the code down below that 197 00:14:13,740 --> 00:14:14,920 gets that done. 198 00:14:14,970 --> 00:14:20,670 You could rewrite it or you could repurpose it taking it from down below and pasting it up above as 199 00:14:20,670 --> 00:14:23,430 it's gonna be exactly the same. 200 00:14:23,430 --> 00:14:24,780 Next up we have the catch. 201 00:14:24,780 --> 00:14:25,830 Call the catch. 202 00:14:25,830 --> 00:14:31,760 Call is gonna do the same thing that it was doing down below so we can repurpose that code as well. 203 00:14:31,770 --> 00:14:34,290 And finally we can remove the old promise. 204 00:14:34,290 --> 00:14:35,190 Example. 205 00:14:35,340 --> 00:14:36,340 So there we go. 206 00:14:36,360 --> 00:14:41,630 We have all of our methods for Express relying on async await. 207 00:14:41,910 --> 00:14:47,220 Now the last thing to do was to test those three out just to make sure they're working as expected. 208 00:14:47,220 --> 00:14:51,080 I'll be removing the challenge comments first and saving the final. 209 00:14:51,150 --> 00:14:57,690 Excuse me not saving the final saving the file for the final time over inside of postmen. 210 00:14:57,720 --> 00:15:00,110 Let's start by trying to create a task. 211 00:15:00,120 --> 00:15:05,400 So right here we have that post request and we have a valid setup. 212 00:15:05,400 --> 00:15:09,330 I'm gonna send that off and right here the task was created. 213 00:15:09,420 --> 00:15:15,390 If I were to mess that up providing nothing for the description as an example I would expect things 214 00:15:15,390 --> 00:15:16,950 to fail and down below. 215 00:15:16,950 --> 00:15:20,480 They do so from here I can read all of the tasks. 216 00:15:20,490 --> 00:15:25,230 I'll go ahead and do that by firing that operation off right here. 217 00:15:25,260 --> 00:15:27,130 I can see I do have to. 218 00:15:27,180 --> 00:15:32,830 Let's go ahead and grab one of those ideas so we can use it to test that last handler. 219 00:15:32,880 --> 00:15:37,920 Now since we have all of this in a collection it's really easy to navigate between everything right 220 00:15:37,920 --> 00:15:39,840 here. 221 00:15:39,930 --> 00:15:47,100 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 222 00:15:47,130 --> 00:15:49,260 get things working down below. 223 00:15:49,260 --> 00:15:55,830 And once again if I was to mess up that last character right here I can see I get the 4 0 4. 224 00:15:55,920 --> 00:16:02,580 So what we've done in this video is we've converted all of our app express handlers over to async and 225 00:16:02,580 --> 00:16:09,000 await in the next video we're going to continue on creating the other ones we need for the application. 226 00:16:09,000 --> 00:16:13,020 And as we create those we'll be using async await from scratch. 227 00:16:13,020 --> 00:16:14,210 I'm excited to get to that. 228 00:16:14,220 --> 00:16:16,560 So let's jump right in to the next video.