 Hey Julie, would you take a look at some code that I've written? Sure. It's just I've gotten the hang of promises, but it's just gotten a little ridiculous. Yeah, so I was wondering if you have anything that I could use to improve my code. I think there is a better way. A better way to tell. We're gonna do async await today. So we should probably start I think would be helpful if we define sort of all the different ways that this can happen, right? So sure the first is the most obvious, right? Synchronous code and so we're gonna use some analogies to sort of help like build this up but so from a perspective of synchronous code that we're using a restaurant as a as an analogy and we're gonna say synchronous code is like if there is no tables in the restaurant and and the MatriD is this person who's just sort of frozen in space until you need something from them, and you're just kind of hanging out waiting to be served by this person. Right, so if you had five people in line you would need five MatriDs. Right, right, so it's kind of like in synchronous you're emulating a whole computer for each thread, so you've literally got a MatriD, a computer for each thread. It's a lot of overhead. It's a huge amount of overhead, and so I think that's why there's a popularity to asynchronous programming in general and then that sort of led to some various patterns, right? And so one of them, which was more popular before but is not as popular now, it is the callback. So the callback is analogous to you go to the MatriD and you put in your name and maybe it's the 1980s and your name is Jennifer and there's about 400 Jenniferers in when they call and you go and sit down in the comfy couch and your kid is crawling all over you and then they call Jennifer and about 40 people are like me! That's my turn! That's kind of what the callback is a little bit like, right. It can be a bit confusing. So then the code can be pretty confusing for that too, right? Because you can have a function and a function and they're all calling each other back and just good luck to the next person who comes and tries to figure out your code, including myself, like a year later looking back at it. So then along came promises and so promises like the more modern you know, you get a buzzer and you're sitting in the in the in the restaurant or whatever or maybe even go to the bar and have a beverage, whatever it might be, but you've got one of those automatic buzzer-y things. So when it's your turn, your unique buzzer goes off and so you know it's your turn and you you go back and you get seated. So that's more like what a promise is. You get that thing, that device that tells you it's your turn and then then it happens. So when we were talking about this, we were like, well, how do you modernize that? What's the more modern version of that that sort of analogous to the async-away pattern? And it's not that it's not a promise anymore. It is a promise, but it's just a little bit more modern. And so maybe an analogy to this is that before you even get to the restaurant, you use your phone to get in line and you get your promise and then they buzz you on your phone when it's your turn and you're like, here I am. I'm here. So it's just a little bit more modern, a little more sleek, a little more streamlined, and a little easier to process. And hopefully I can debug without having to deal with all these things happening in an order that I might or might not expect. Exactly. All right, so let's look at some code. It felt like a good idea to sort of just start with the idea of what does a promise look like? And Bob already showed you one at the very beginning. We have a little example here where I have some open source APIs that I'm going to use, the cat fact API and the anime fact API. And so this first one is just a promise where I want to fetch a fact from the cat fact API. And once I get the response, then I need to get the JSON from the response and then I'm going to randomly pick an item and return it. So this works. It works great. There's nothing wrong with it. But it is that promise pattern with the thens, etc. So that's a little bit confusing. So if we translate that, we can rework it into an async await call. And so what this is, is that you start with this async decorator at the beginning of your function, you decorate the function with the async keyword. And when you do that, basically it tells JavaScript that you want to return a promise. So even though you don't type return new promise, it does return a promise. And so then inside of that, you can just put a try catch function so that you're catching any errors. And you can then make the calls to your asynchronous endpoint. So in this case, I'm going to define a constant for the response. And I'm going to await the fetch to the cat fact API. And so all that does is say, Hey, wait right here, don't execute the next line until the fetch API response. And so then the response variable gets its data. And then you can translate that into getting the JSON out of the response and assigning it to the data variable. Then you can get a random element and then return that element. And so you can tell that this is four lines of very easy readable code compared to this more complicated, you know, jumbly way of doing the same thing. And I think the code becomes significantly more readable. Definitely. And so then just as one more example, let's talk about doing two asynchronous calls. So in this case, we're sort of wanting to do calls in parallel. And this is kind of the idea that we're going to send out a bunch of requests. And when once we get a answer from all of them, then we'll resolve what we're going to do. So what we do is create an array. And in this case, I'm going to call the array promises, and I'm going to push on the calls, first the fetch call to the cat fact API, and then the fetch call to the anime fact API, know that there's no await on the before the call, because I'm going to await it after. And so then the next line, the const results, I'm going to await the promise dot all method where I pass in the array of promises I'm awaiting for. And once all of those promises in the array resolve, then the next line will run, which is to assign the data cats object, the results of the cats call, and get a random cat fact and print that out. And then the same getting the results of the anime call and awaiting, or excuse me, awaiting the JSON for that, and getting the anime fact and pushing that out. And so what that looks like just simply is, you know, some some cat facts and some anime facts. So nothing super spectacular there. No, but the code is a whole lot cleaner, whole understand. Exactly, exactly. And so that's the power of that. One of the things though is that, you know, async await, you know, doing using the async keyword and using the await method aren't always what you want, often what you want, maybe, but not always what you want. There's an example of creating maybe a delay function where ironically, it's the set timeout that you we've talked about in previous episodes, where you can create a new delay function, you don't decorate it with the async call, you actually manually return the promise. And the reason you do that is because you want access to that resolve variable so that you can say, hey, I want to set a timeout for a certain number of milliseconds. And then when it's done, I want to resolve the promise. And so you're using it to so you can sort of pass in a number of milliseconds you want to delay, and then you resolve after the timeout ends. And so then you can await the delay function, you can await anything that returns a promise, even if it's not decorated with the async call, you can still use await and against anything that returns a promise. And so you can sort of very cleanly put a one line delay anywhere in your code where you might need it for like waiting for things to be done, like if you want to, if you want to check to see if some other multiple, you know, asynchronous processes have finished, and you maybe have like a ready keyword or something like that, and you're sort of just want to keep waiting maybe 500 milliseconds until it's ready. It's a handy sort of helper function to have. That's great. It's a really good tip. And so I guess if you just remember that async that the async keyword just kind of converts the function into a function that returns a promise. Exactly. And if you remember that the await keyword is always going to pause the code and that's the, that's honestly, I learned this stuff from watching you presented at a couple of conferences and it took a couple of tries to actually get my head around it because it almost, if you imagine what the compiler is doing, it's almost like turning the code inside out, right? Because it's taking the middle and stopping it there. And, you know, you can see if you compare the examples you showed of kind of the promise versus the async, the code is just different, you know, and it's amazing that the compiler can do it, but it works. So did you like this video? I hope did. If you did, give us a thumbs up and consider subscribing to the Voitanos channel so you'll be notified of any new videos that drop in Voitanos' channel. And leave us a comment below if you like this or have ideas for other things you'd like us to cover or things you'd like us to cover in more detail and there are going to be new videos soon. So thank you for joining us today on BrowserNative.