Async Functions

[00:00:00]
>> Okay, so back to our data fetching, which is what we were trying to do. And why we needed to learn destructuring. Let's destructure the data that we fetched so that we can use it. So let's recap what we did to fetch our [INAUDIBLE]. We had this resource it has a message property, that's what we care about.

[00:00:20]
We had done a fetch on this resource URL. And we had captured its value as a response, right? Like this, [LAUGH] with a weight trick question, nice. Okay, then we had parsed out its body as json and captured as the body variable.
>> Await response?
>> Await response.

[00:00:49]
And what was the method we used? .json.
>> .json. Okay, so now, all we care about is this array that's inside of this body object, our message property inside of that body object. So what we can do now is extract that. Now we know how with our destructuring, to just pull out the message which in this case is an array of hounds that we care about, great.

[00:01:18]
So, what we're gonna do now is basically we have a process or we could call it like a procedure for fetching a resource from a URL. Parsing the response body as json and extracting the message value from within that body. What we're gonna do is take all of that and wrap it up in a function.

[00:01:43]
Now, the thing is, if we try and do that in a regular function, we're gonna have a bad time. So here, I've got a function that's it's just the first part of this but just for brevity. We're gonna try to fetch the response from a particular URL and do the same stuff that we did before.

[00:02:02]
We're just gonna stop at the response level just for quickness. But I can't even declare this function like this, JavaScript won't even let me let alone call it. It says await is only valid in async functions, async generators and modules. So, this is where I said earlier we can't just drop await anywhere.

[00:02:25]
JavaScript has specific rules about where await is allowed. One of the places it's allowed is in our console. But it's not allowed inside of a function, unless we make it a special async function by putting the keyword async in front of function. This tells JavaScript that this is gonna be a function that's carrying out some kind of potentially long-running asynchronous operation.

[00:02:55]
And so we should expect that we might be working with asynchronous code in here. We should expect that we might need to use an await. And so that's what JavaScript means when it says async is only allowed in async functions. So now, if I just do the same thing But with the word async in front.

[00:03:16]
Now JavaScript didn't complain. And if I do fetch response. Fetch response of my URL, what do we think we're gonna get? Well, it helps if I put it in a string.
>> Promise.
>> Our friend the promise we ring it's beautiful little head again. [LAUGH] Yes, so because this is an asynchronous operation or at least it might be.

[00:03:52]
Async functions are going to be promisy. And so that means in order to get the output value of the a sync function, and guess what keyword would I need to use? Wait. Now we have our response, okay? So, this is what we have to do if we wanna use async operations is we need to wrap them in an async function.

[00:04:17]
And then that function itself is an async operation, once we introduce asyncyness. Everything else that we're dealing with it, in has to be async.