Transcript from the "Using Await with Promises" Lesson
[00:01:14] So this is going back to kind of like how HTTP requests and responses work which is a little bit out of scope and sort of more general web concept. But suffice it to say that when we try to fetch a URL or when in my browser, I just type in frontendmasters.com.
[00:01:31] The browser sends a request for that resource at that location, and then it receives, hopefully, a response back with the webpage, or with the hounds in this case. And so let's try now, what happens if we use a weight. So now, if I use a weight, I can then get the value returned or the value that that promise resolves to.
[00:02:22] So let's try it out. Okay, so now, we've actually got something that looks more meaningful. It's still not a list of hound, though, so we'll talk about that in a second. But now, what we've got is a response object. And here, we're starting to see some things that sound very HTTP.
[00:02:44] For example, we have like a status 200 which I don't know if y'all remember my little friend HTTP Cat 200 means okay. Success, all good. [LAUGH] So there could be other things, like 404 is another one that you might have seen. Not found.
>> A little treat for the cat people, cuz they've been seriously underserved by my GIFs here.
[00:03:39] And what we really care about here is in its body property, the response body, is what we really care about, or as the Spice Girls remind us, slam your body down. The body is what we really want to be working with here, when we're trying to request a resource.
[00:03:57] But if we look back at our object, okay, we see there's a body property, but it says it's a readable stream. Why don't realize? This is a stream of data that, well, it's apparently readable, so there must be some way to read it. So what we need to do is we need to read the data that's returned that that's part of this response or that it's body.
[00:04:17] So in other words, we need to slam the body down. [LAUGH] And that's gonna be our next task now responses have a method called JSON. Response.JSON is going to, Read that stream of bytes that is the body data and parse it as a JSON object, which we said is what we expect at the resource at this API endpoint that we're looking for.
[00:05:44] So .JSON Then on a response object is also something that gives me an IOU for a value in asynchronous operation, that gives me a promise. But maybe it doesn't take as much time as let's say talking to the network. Question?
>> Should we add a weight in front of response.JSON?
[00:06:25] [LAUGH] I want the dogs, I want the dogs list I don't want the IOU for the dogs list, so yes we are going to use more awaits here. And it's starting to feel like maybe this is getting frustrating, like we have a lot of stuff to work through here and at a certain point you might want to give up like Gretchen Wieners with trying to make fetch happen.
[00:06:46] And you might feel like Regina George is saying stop trying to make this happen. I mean, girls, but don't give up. Let's not give up. We have our friend. Wait. So let's try again. So, now what we've got, we're gonna we're gonna have to start over, essentially, but that's okay.
[00:07:02] [LAUGH] We're going to have to await the fetch. And then, await the response.json in order to actually get our body. Finally, we will slam the body down, so let's try this again. And, I'm just gonna reload here. Okay, so now I'm gonna execute these separately. So, we're doing this the same time, we've got response is a weight fetch.
[00:07:32] So response is a response object, and then I'm going to call .JSON. Wait that excellent, excellent detective work, folks in the chat. And then I can capture that value as a variable like body. So now, okay, now, body is this object, that is actually what we expected, which is what our browser found, when we went to that URL and actually has our dog data.
[00:08:03] Finally, that is so fetch. Help you follow folks we're saving grace because anyway I couldn't resist the fetch. So now we have some data. Success, hooray, fulfilled, resolved, finally awaited. But now we have to do something with it. So, [LAUGH] our work has just begun, but we got the data at least, all right?
>> What can we do when our fetch request throws an error?
[00:09:10] And the URL that I thought was gonna work doesn't return what I thought it would anymore, or any number of other things could go wrong. A shark could have chewed through the cables. So we do wanna be aware of the fact that something could go wrong here. And so far we've been writing very optimistic code that assumes that everything's gonna be fine.
>> What happens if we just use fetch? Do we just never get an answer?
>> What happens if we just use Fetch, do you mean like for example if we do like let, new response equals fetch,
>> No, no, maybe do the fetch the dog.
>> Yeah, sure right.
>> It's running on console, right? And there's a promise pending.
>> Uh-huh. And then what do we do? How do we talk to that promise anymore? How do we,
>> It's just never gonna give us an answer. We just wait forever?
>> Is it just gonna be pending forever?
[00:10:26] So, what's happening here, is that since we didn't like capture this value at all, we didn't assign it to a variable. We didn't like assign it to a property of an object or something like that, like we don't have any way of pointing at the promise that this fetch evaluated to.
>> Now in the background, somewhere that promise has gone ahead, and its lifetime is like lived a million years. And maybe isn't a different state owl, maybe or maybe not, we don't know, but now we don't really have any way to talk to it and ask it hey promise, what's your state now?
[00:12:11] So then was the earlier way of dealing with promises where what happens is So we say, promise.then, and we give it a callback. And usually, the way the callback works is it takes in whatever the value that the promise resolved to. And sorry, I'm saying callback because we're writing a small anonymous function that's gonna execute some time later.
[00:13:07] And then, it's gonna take whatever value it fulfilled to pass it in to the little anonymous function I've declared here with my arrow, and then do whatever I set to do, which in this case was log the value. So let's try. So now, if we see this whole thing resolved to a promise, and at the time that it evaluated in the console, it was pending.
[00:14:03] I'm gonna give you a function you're gonna wait to call it until you're done with the promise. Whereas if we use a weight, we can just sort of pretend like that promise is just a regular function call that's gonna produce a value, if that makes sense. Sorry, I should say, we can pretend that the asynchronous operation like fetch, which returns a promise, is just a regular function call that returns a value instead of an asynchronous.
[00:14:28] I owe you of a value. So, these are both options, and you can read all about promises, and then in our BFF MDM.
>> Could I write await in front of any function, I want for to wait?
>> Can you like, wait for, for example?
>> Yes, you can't.
>> You sure can?
>> But, as we're gonna see in a second, you can't write await just anywhere. I can write it in the console. I can write it in a few other places, but I can't just throw away it around, but we're gonna talk about that in a second.