Promises Example: fetch

[00:00:00]
>> Will Sentance: Let's go. Let's see that because it's gonna be a complex line. But starting with our first line here, we wanna put on for a while, Ryan. I apologize Ryan. Ryan, what are we doing here in line one of our code?
>> Ryan: Declaring a function display.
>> Will Sentance: Declaring a function display, exactly and storing it in global memory.

[00:00:23]
There it is, the function display is stored. Excellent, thank you, Ryan. Line two, left hand side. Ethan, what do we do on the left hand side here first, just a sort of easy bit here first Ethan.
>> Ethan: Declaring a constant future data.
>> Will Sentance: Exactly, future data, I never know whether Americans say data or data.

[00:00:44]
But all right, so it's uninitialized for now. Already by the way, this tells us that fetch call on the right hand side, the facade function that triggers stuff in the background, it must also do something in JavaScript. Because the result of it in JavaScript at that moment is stored on the left hand side.

[00:01:01]
So it must be two pronged in some way, two consequences. So, future data.
>> Will Sentance: Here it is, futureData will be the result in JavaScript of half of the consequence of fetch, its JavaScript console. Remember, the output of the right hand side stored on the left-hand side. But this is a pretend JavaScript function, it's a facade.

[00:01:27]
It's gonna do some JavaScript work for us, but it's also, automatically, but it's also gonna do some work in the background, the web browser. There it is, off to our URL. So, let's do it JavaScript consequence first. It is going to immediately in JavaScript return out. Let me use my pink here for my special object.

[00:02:03]
>> Will Sentance: My special object.
>> Will Sentance: A promise object, it's just an object automatically created in JavaScript by fetch. It has two properties. We're gonna see what they do later on. Value which is undefined, nothing stored on it yet. Already you might be thinking, hold on, I'm gonna get some data back.

[00:02:28]
I wonder where that's gonna perhaps show up back in JavaScript. And a property called on fulfilled. It's gonna turn out to be hidden but super important which is an empty array. And that object is gonna be stored if the output of the right hand side is stored on the left hand side and so torn, it's gonna be stored where?

[00:02:50]
>> Speaker 4: In the futureData.
>> Will Sentance: In the futureData label, in the futureData identifier, exactly. We grab it, we stick it into,
>> Will Sentance: FutureData, there it is, value, I can hear Tana getting worried about how far right I've gone here with the my promise object here. On, there we go, on fulfilled is a big, empty array.

[00:03:21]
There it is, folk. So, well, look at this, I'm about to go and set up some background web browser stuff. Do I forget I set it up? Well, of course not, I've got a lovely little promise object here that reminds me that I've set something up in the background.

[00:03:37]
But now, things get interesting. Where is fetch's other consequence on the board to our specialist in spatial placement-
>> Ethan: [LAUGH]
>> Will Sentance: Ethan, where is our other- no, no, no, you don't have to- where is our other consequence of fetch on the board?
>> Ethan: It's in the web browser.

[00:03:52]
>> Will Sentance: It's in the web browser, exactly. Look at this, two prongs, [SOUND], right? And the other consequence is in the web browser.
>> Will Sentance: There you go. In the web browser, there it is, where we are gonna set up, now I sometimes call this XHR which is XML HTTP request, that comes from the notion of XML being the format of the data by which we send messages over the Internet.

[00:04:23]
HTTP being the set of rules for how we send messages between a browser and a server, an HTTP protocol. And request meaning, I wanna get stuff. But we'll just talk about it more generally as a network, that means over the Internet, request. There it is, a Network Request.

[00:04:41]
That's the feature we're gonna use in the web browser down here. There it is, Network Request,
>> Will Sentance: There it is. And we're doing this at roughly I guess, zero milliseconds. We tend to start there. By the way, already, look how much that five letter word has done. And we, not done yet.

[00:05:11]
A network request to Twitter needs to know what important information Jeff, from what's being passed into fetch, what important information does it need to know to know where to go?
>> Jeff: The address.
>> Will Sentance: Yeah and that's sorta got two parts here. It's got the domain name, that's gonna tell us which computer on the Internet to go to, at which IP address.

[00:05:31]
And once we land there, the path, that's gonna tell us which bit of that computers store of data, which route that we're gonna go and grab data from. Those two pieces are gonna be passed to our Network Request down here. So we're gotta have our twitter.com, and we're gonna have our path.

[00:05:56]
And we can send data from a browser over the Internet, or we can also ask for data. So we can say, hey, I've got a new tweet I want you to save. What's a method we use for that? What's the HTTP method we use to send data, to post.

[00:06:11]
>> Audience: [LAUGH]
>> Will Sentance: There we go. Dear. All right, well everybody. [LAUGH] Brilliant, yes, post, well done. Exactly, post. What about when we wanted is mainly be getting data tweets? Okay, right-
>> Audience: [LAUGH]
>> Will Sentance: This is just silly. All right, well.
>> Audience: [LAUGH]
>> Will Sentance: We'll reshoot that. What if I want to retrieve data?

[00:06:29]
>> Speaker 4: Get.
>> Will Sentance: Get.
>> Ryan: Get.
>> Will Sentance: Get, well done, people. Leave it in.
>> Audience: [LAUGH]
>> Will Sentance: So, we didn't specify that here. That's because fetch defaults to get. It's gonna default to get. If we wanted to Post, we can actually pass in as another argument to fetch an object full of options.

[00:06:50]
That means kind of extra information about how we wanna use fetch. And we can set the method to be posting. But we're gonna default to get all by the way from this five letter word, kind of crazy. That's the feature we're using. Is it complete? Well, that's all kind of second, but on completion,

[00:07:12]
>> Will Sentance: What are we gonna do? Is it complete at zero milliseconds? How long does it take to be able to go to the Internet? Does it take zero milliseconds to be able to go to the Internet? No, so is it complete, Kayla?
>> Kayla: No.
>> Will Sentance: It's definitely no.

[00:07:25]
Spot on.
>> Will Sentance: Actually, before we move on to what we do on completion, let's get it started. Let's get the work started. So it's gonna send a message off to over the Internet, it starts to send a HTTP message over the Internet to Twitter's headquarters. There they are, Twitter HQ, there it is.

[00:07:52]
I never know whether I'm drawing a computer here or kinda like an office, but let's leave it ambiguous. Actually that's,
>> Will Sentance: Could be an office, couldn't it? Could be, it's kind of, interesting, yeah.
>> Audience: [LAUGH]
>> Will Sentance: One observation, there it is, over the Internet, that's started off as zero milliseconds, off it runs saying, hey, Twitter, I need to go and get data.

[00:08:14]
All right, but it's not complete at this point. By the way, all this done by these five letters.
>> Will Sentance: I'm gonna go back to my story about my employer at the transsiberian railway. All over the Internet, how about that? All right, so, at the Internet, yeah, so, on completion though, what is gonna happen?

[00:08:37]
Well, if you remember when I said timeout, when we set up a background feature, we had a function here, that would auto run on the Call Stack, let's actually put our Call Stack in here at this point, would auto run on the Call Stack,
>> Will Sentance: On completion of the background task.

[00:09:00]
But anyone see a function being parsed into fetch here? No, so our two pronged features or facade functions for web browser features, they take a different model. They say, instead of having a function passed in, you've got this pretty object that's kind of keeping track of the fact that we set something up in the background.

[00:09:24]
So one will use it. And in fact, when that data comes back, let's use purple for my return data from Twitter, when it does complete, it's gonna come back with some tweets. They call it response object. We're gonna simplify it and just give it the string of the tweet, whenever it comes back.

[00:09:39]
Where could that go? Raise your hand if you've got an idea how we could get that data back into jobs where it could go back in JavaScript. Yeah, let's have Kayla.
>> Kayla: It goes, I can't remember what you called it, the on, something on the
>> Will Sentance: It's not into that array.

[00:09:56]
Mark, do you wanna take this short?
>> Mark: Into the value?
>> Will Sentance: Into the value property. So right, by the way, you said, Kayla, there, into the value property. Because fetch has these two prongs, and they are intimately connected. Such that when the background task completes, it's going to stick into that immediately returned out object.

[00:10:16]
Whenever this happens, could be tomorrow, very, very slow network request. But could be any time, that object that got stored into futureData has a beautiful little, look at that, empty undefined binding property, into which what could be stored Kayla?
>> Kayla: The response.
>> Will Sentance: The response data, the data that comes back from Twitter, she's spot on.

[00:10:33]
It will go back into this value property. So specifically, Matt, what's the exact sort of locations I can put it in the on completion bit here?
>> Matt: It's in the futureData.
>> Will Sentance: FutureData, mm-hm, futureData.,
>> Matt: Dot value.
>> Will Sentance: Dot value, yeah exactly, futureData.value will be updated with the data, just as Kayla said, from speaking to the Internet.

[00:11:04]
Yeah, she's spot on, thank you to Matt as well. All right people, can we just talk about for a second what those five letters did? My goodness, they set up in the background, they speak to the Internet with all the information it needs to go and get the right data back.

[00:11:21]
But they also set up in JavaScript a little placeholder object known as a promise object. Just a regular object but with some auto built in properties. And that was stored into futureData, there it is. It has an empty value property, it has an empty array on the on fulfilled property, which by the way we'll see as a hidden property.

[00:11:46]
But it's intimately linked to the background work being done. Such that when the background work finishes, could be 200 milliseconds from now, 300, who knows? That value property of the object is gonna be [SOUND] updated.