Viewing the Response

[00:00:00]
>> Brian Holt: So just to kind of drive home a little point here, if I put console.log, which will log first?
>> Brian Holt: What do you think's gonna log first, line 11 or line 8? This is a trick question, so you probably wanna go with the trick answer.
>> Speaker 2: Line 11.

[00:00:19]
>> Brian Holt: Line 11 is gonna run first.
>> Brian Holt: I gotta save it first. Reason being is this takes time, right? It's the same reason if I did a set timeout 1000 right there, right? This one would have logged first because this starts executing first, right? But ultimately, this will run first, because this takes some time to do, whereas this is instant.

[00:00:42]
Something else that's kinda cool. If I come in here to the network inspector, it's relatively similar in the Chrome one. Check this out. So I'm gonna ask for all. Now if I refresh this page, you can see here that I see this thing right there. So I'm gonna click on that.

[00:01:03]
Notice it's from dog.ceo. It's a fetch and it's JSON. So I click on it. And I can see down here what I'm actually getting back from the API.
>> Brian Holt: So I can see what cookies went out with it. We're not gonna talk about cookies today, but more importantly, I can see the response.

[00:01:22]
So I can actually see what came back here from it as well.
>> Brian Holt: So that's pretty cool as well. So you can see things that are going in and out of your application as well.
>> Brian Holt: It's a useful debugging thing if things aren't coming back like you expect them to or something like that.

[00:01:41]
So dogs.ceo runs a server. And we're saying, hey, give us a dog picture, and then it gives us back a dog picture. So they're running a server that we're getting data from, somewhere out in the ether. I have no idea where it is, nor does it matter. All right, sorry, go ahead.

[00:01:58]
>> Speaker 3: So when we get the data and process into JSON, we didn't save it anywhere. So how does the second function know that data mean is whatever data we get back?
>> Brian Holt: So we know that here when we called .then, whatever we return here, right, once that finishes, it's going to be injected here.

[00:02:17]
So we just know that whatever return here is going to be given to us here.
>> Speaker 3: Because that's how fetch works?
>> Brian Holt: That's how fetch works, yeah, that's exactly right.
>> Brian Holt: Good question.
>> Brian Holt: But you're right, this response definitely does go out of scope, so I couldn't say console.log(response) down here, right?

[00:02:40]
That wouldn't work because this is out of scope now. But now when we have this data right here, this means that we can access the dog pictures. So this is actually literally a JavaScript object now. So I can actually say, console.log(data.message).
>> Brian Holt: Instead of logging up the whole object.

[00:03:02]
So now if I refresh here, notice it's actually just the image here. So I just wanna throw some terminology out there so you're just aware what's happening. But you don't really have to care too much about that. What fetch returns is something called a promise, which means it's basically an object that represents a future value.

[00:03:23]
>> Brian Holt: There's not a lot more to it than that, because we're just using the promise right away, but that's what's happening here. These are called promises.