Loading
Current section: 2. Async/Await 5 exercises
solution

Linear Flow

Transcript

00:00 Alright. Let's jump into it. We'll come down here, and we're gonna take this load user data, which we're exporting, and convert it to async await. Actually, these three dots right here are my editor telling me that this can be converted to an async function. And I could literally just say fix with agent and it would do that for me.

00:18 Whoops. Or, I think alright. Yeah. One of these. There's a keyboard combination that I can have, have it do that to.

00:25 There we go. So, yeah, you could go for it. Do that if you want to. We're not gonna do that though. We're instead, we're going to yeah.

00:35 Okay. Let's see. Okay. Yeah. So it's having us return an async function.

00:40 That's not gonna be quite right. So here here's I'll just do it by hand like the old fashioned way. So here we're gonna get our user. And oh, I I know why. The first thing that we need to do, when migrating or refactoring this is change this to an async function.

00:55 So what that does is it enables us to, to use the await keyword, but it also immediately changes the return value of this function from a regular value to a, to a promise. So let's actually do this first with a function, and we'll, call it, get sandwich. And here, we'll return sandwich. Okay. Great.

01:21 Nice and easy. If I console log, get sandwich right there. Boom. We get our sandwich. Awesome.

01:28 As soon as I add the async keyword, before doing anything else, I add async and it immediately changes the return value from sandwich to an object, to a promise. We can take a look at that here. Let's see. How would we do that? I wanna try and visualize this.

01:45 We can yeah. There we go. Just look at the console. We can see that is a promise. It is fulfilled, because it like, we're not actually doing anything async, but it, so it's fulfilled right away.

01:57 But it is a promise. And so that is an important thing to understand. Once you add we're not gonna add async everywhere because then it turns everything into a promise and that would not be optimal. But in the case where you're actually doing asynchronous stuff, yes, you, can absolutely do that. And now the AI knows exactly what I'm trying to do and it can finish the rest of this for us.

02:19 So we've got our fetch user and we have this await keyword in here. And so remember earlier I was saying how, like, you can't just stop the execution. It's gonna run from top to bottom and that's just how it works and and you can fire off things to happen later and come back and call your callback. Well, await actually kinda breaks that rule a little bit, just syntactically. So the code is going to execute execute.

02:42 Oh, there's an await there. Alright. I'm gonna stop executing. So, it actually just jumps off the main thread and then other things can happen. And then when a fetch user resolves, then it's gonna come back.

02:53 It's just gonna have all the same context, all the same variables, everything's preserved, and then it's gonna continue to the next line. And for us, that next line is fetch order. So then it's gonna stop and it's gonna let the asynchronous stuff do its thing. Then it'll come back and it'll have all the same variables. It's still gonna have this user.

03:10 Everything's gonna be hung around and then it's gonna go to the next line where we actually return the users and orders. This is beautiful. This is so much nicer than the promise chain stuff that we have done thus far. So let's go ahead and console log or do our data then right there. Tada.

03:29 And we get our result. That's awesome. Interestingly, we can actually also get our result with await. And then we could just console log. So we can do an await at the top level of our module, and we'll end up with that.

03:44 So pretty cool stuff. I I'm, really, really happy that we have async await. I think it simplifies a lot of things about promises. But still, it's really important for you to understand how promises work. We're gonna look at, some error handling here and and stuff like that here in a bit.

03:59 But this, it's it's just beautiful. But understanding how the promises work under the hood are, is really important for your understanding how to use asyncawait efficiently. Alright. That's it. Well done on this one.