Async Await

[00:00:00]
>> Okay, this is the exact same functionality here, right click the Gimme dog button and I get objectively a very cute dog. Now I have this async function. So this async here is critical. Now I can just say, a weight fetch(DOG). And then the code just waits. It just pauses for those like, cool I'll wait here until this is done.

[00:00:24]
And then I say, await promise.json. And I get this process response, right? And then now this process response is just the object. Isn't this like a trillion times easier to read? For me it is, cuz I can just say, cool, wait for this. Okay, now I have everything that I need and I'm done.

[00:00:47]
As opposed to having had nested dot then, dot then, dot then, dot then. So let's talk about it for just a second. What does await actually do? Await accepts a promise, which is that objects that we were just talking about before, right? And then it just waits for it to finish.

[00:01:07]
Once it's finished, then your code resumes. So, if I click Add doggo right now, it's going to call this and it's gonna say, it's going to actually pause execution on this function. It's not going to go immediately to line seven, right? It's just gonna wait. It's going to await, one could say or did say, okay?

[00:01:31]
Then I call await again here on the second line, so whenever that comes back it's gonna go to line seven and run this and I'm gonna say, await this promise.json function to finish, right? The processing part of it. And then once this is done, I now have this process response, which is the json object that came back from the API.

[00:01:52]
Makes it so much simpler to read. And then the rest of it runs line eight, then line nine, then line ten, than line 11, and then you're done. So, one thing that's critical to keep in mind, you can only use await if you're in an async function. If I delete async here, it's gonna say, await is only valid and async functions.

[00:02:19]
So you have to tell the browser ahead of time, this function is gonna use await, so be prepared for that. You have to say async here, If you are going to do await You might ask me, well, what if I'm in a function that's not an async function?

[00:02:44]
Then you can't await, [LAUGH] that's simple. What you can do though, is you can create another function that's async and then you can call that one, and then you can use await from that function. That's probably how I would do it. So, by all means, if you're doing AJAX request, just do async await.

[00:03:07]
So nice, it's a relatively recent addition to JavaScript. I wanna say it's, 2017 or 2018. And now browsers have caught up basically that you can use a sync await, let's look at, can a use.com, async functions in JavaScriptt. Not AP, async functions. Yeah, 94% of global users use it.

[00:03:34]
It wasn't an IE11, which will bring that total way down, but basically it's been in Firefox since 2017, so good guess, Brian. [LAUGH] It was in old versions of Edge, that makes it really widely supported as well. It's been in Chrome since 2016. So yeah, Chrome's shipped in 2016.

[00:03:57]
Does this feel more simple than thePromises? Yeah, I think so. I use it all the time. So, one way I did not show you how to do this, is with what are called callback functions, where basically you can say, hey, go out and do this and then call this function whenever you're done.

[00:04:15]
It looks really similar to Promises but you can run in this thing called Callback Hell. I really don't wanna get too much into it. But that's like the old, old way. But if you see nested functions that nest functions, that's what's happening there. One side note, that can throw people off about async functions.

[00:04:36]
The reason why you have to declare them as async ahead of time, is because async functions, because they can wait for things, always return promises themselves. Because, right, you're basically saying to the browser, this function could take a while, right? Which means that the browser has to have some way to be able to wait for that thing to finish.

[00:04:57]
Even this function here where I've made an async function, that all it does is return, Brian, I already told the browser's like, hey, I could wait for things here, right? Things could happen. So the browser is going to, or your JavaScript basically is already going to return a promise.

[00:05:14]
Okay, so if I call getName here, notice that this comes back as a promise. Which you can await an aafuture function, right? But if I really wanna get the name out of this, I just called, getName.then, and then finally I can get the actual name, Brian. Just throwing that out there as a warning, just know that async functions will always return promises.

[00:05:42]
That's the the takeaway there. No, shouldn't have to run into it too much. Yeah, question?
>> Would it be possible to handle multiple promises at the same time since they're asynchronous?
>> Yes. Well, I'll show you, it just ends up being a little bit more complicated. All right, I'm just gonna call getName multiple times here.

[00:06:13]
The way that she would do that, let's say I have another async function called getLotsOfNames. And I wanted to call getName multiple times. Let's say that this takes in a name and it just returns the name. Let's say I wanted to go out and get 15 names all at the same time.

[00:06:40]
The way that you would do that, is you would say, consNames = promise.all, and then you would give an array of promises to await on. So I could say, getName(Brian), get a few of these. I don't know, Cassandra, Reid, Nikki, okay. And thes names here, if I just said console, no I have to say await.

[00:07:17]
Console.log(names) And then I have to call it. So getLotsOfNames. Now I get an array back of all these result promises. Kind of some advanced concepts here, right? So, if this scares you, just go ahead and ignore and move on, which is totally fine. But if you wanted to await a bunch of things all at the same time and you wanted to wait for all of them to finish, this is how you would do it.