Promises and the Fetch API

[00:00:00]
>> Will Sentance: OK, so we are going to use our new tool that became available to us in ES6: promises that allow us to speak to the web browser, in this case to use its, well, we're going to use promises to use the network feature with the built-in label available to us, fetch. And this one is going to presumably work pretty similar, set up background work, in this case, speak to the internet to get our latest videos.

[00:00:29]
So we're going to hit that URL but via our web browser features, and when we're done, we're going to want to use those URLs, the returned data, the retrieved data from TikTok's headquarters, presumably hopefully a nice list of videos, depending on how our API at TikTok is designed. A nice list of videos, we're then going to want to display those videos. But what the heck is going on to make this possible?

[00:00:56]
Well, it's all going to depend on these new two-pronged facade functions known as promises. So here we go, let me draw in my web browser down here, let me make sure I get about the right amount of space, I think this is probably about right. Draw in my web browser, everything below this line, oh dear, everything below this line is web browser stuff, OK. Everything below this line is web browser APIs or features.

[00:01:30]
I here just means interface things, we can interface within the web browser. We have, as always, our global execution context with our memory, there we go. We'll have our console here. There it is. And we're going to have our JavaScript engine kick off here, let's make sure our pen is working. And we'll have our call stack, oh dear. Oh, no, no, no. Our call stack, there we go, beautiful, our call stack, right here, which as soon as we kick off our code, we're going to have our global execution context kick off, and so here we go into JavaScript, single-threaded of single thread of execution, and at, well, we're not going to hit the zero milliseconds yet, let's first declare a function.

[00:02:26]
Ryan, what function do I declare in my first line? Display passing an argument of data. Yes, but we're not going to pass it in yet, are we? We're just going to save the whole thing here and jump down to left-hand side of our next line in our thread of execution, what is it going to, I'm not going to make you do the right-hand side yet, Ryan. Left-hand side, what are we declaring?

[00:02:51]
Declaring future data, future constant data. OK, raise your hand if you say data. And retaining see data. Is that not a thing in America, OK. Some people say data, data, OK. Great. Good conversation, everybody. That was amazing. Alright, so future data. Now, at this point, as always, what's future data's value, Tenzin? What's the value of future data at this point? Um, I think it's just a call to fetch.

[00:03:24]
Oh, do we ever store calls to stuff? Oh, it's undefined. Right, uninitialized, but yes, exactly, we don't yet know what to store. Nice work, turns in, exact, we do not know yet what to store because we don't yet have a result of calling the right-hand side. Now, if that right hand side is actually going to be inside of the call to fetch, speaking from JavaScript off to the internet to TikTok, it could take a day, and it would block the further running of our code, so I bet you that fetch on the right-hand side must be triggering some background work in the web browser, but it's also clearly going to return something into JavaScript.

[00:04:04]
It's going to be one of these two-pronged, but for now it is uninitialized, but let's hit this really significant line. Future data is going to be the return value of calling these, these 5 most powerful letters in JavaScript fetch, to which we're passing. I'm just going to shorten it a bit. TikTok.com/will. OK. All right, here we go, can I get this right? We do know that we're speaking of to the internet.

[00:04:45]
Chris, what feature of the web browser are we going to use when we run fetch? Network. Network. So immediately we head and turn on our network request, network just meaning to speak to the internet, our network request feature. Here it is, network. OK, we need some info for that, we need the URL or domain, and we need the path, the string at the end that tells us which bit of TikTok's server or computer we're going to want to access.

[00:05:22]
So we pass in our domain. You can see I used to write something here many times that was not TikTok, but was instead Twitter, that's been an adjustment. TikTok.com, and then our path will. We can actually send and post, the term post means, send to TikTok some data, maybe a comment, maybe a new video description, maybe a new video. That would be a post. We can set that up within Fetch by passing in a second input that contains information about what we're going to want to send to the internet, because we have different ways of speaking to our TikTok server, our TikTok computer out there on the internet, fetch defaults to a particular way when we want to get data, known as get, but we could set that instead to, I want to send some information to TikTok that they can add, maybe to my account, that would be our POST request, strange to post, but it's a request to say, hey, can I do this, can I have this interaction?

[00:06:46]
This is going to be get by default. That's all included in this fetch call immediately. OK, that's, I probably, I suppose you can say here right now, that is going to immediately say, head off to TikTok's HQ. I can't really see what else, head off to TikTok's HQ I'm going to sort of draw it like this as something between a building and a server. Send a message to TikTok in the format of the HTTP, P stands for protocol, sorry, but the HTTP protocol, send an HTTP message off to TikTok and say, excuse me, we want to get some information of, from TikTok, of maybe what, you know, the latest video links, it was easy when it was tweets, the latest video links from Will's account, go off and do it.

[00:07:53]
We did all of this at our 0 milliseconds, all of this at our 0 milliseconds. OK, that is our network piece done, is it? At 0 milliseconds, we've headed off to TikTok, all from this one line, and none of it in JavaScript. I want to make sure I hear everything, there's so much bloody stuff it does. Is it complete at this point, do we think? Michael, do we think that we've got our data back after 0 milliseconds?

[00:08:28]
Uh uh. Physics won't allow it. We need some time, so at 0 milliseconds, I'm going to have a little sort of subtitle here, complete. At 0 milliseconds, no. On completion. On completion, I'm going to hopefully get some data back. Some data retrieved from TikTok, my list of video URLs, my list of video links. That I'm going to want to somehow use in JavaScript and maybe display, for now, probably in our console, but, you know, eventually we'd do it on our user interface with the help of the DOM.

[00:09:01]
How the heck are we going to get them back in? Well, it turns out this is a two-pronged facade function, whereas our setTimeout had one prong. I mean, technically did, you could get something back in JavaScript, but it wasn't that interesting. This is a two-pronged 11 that allows us to also within JavaScript, immediately return into our future data label. A brand new, well, it's been around for 10 years now, but a brand new versus the old fashioned way object.

[00:09:49]
Oh no, a brand new object people called a promise object, and this object is going to act as a placeholder for the data that we get back from this background work and we'll see soon a place in which we can store what code we want to then run on that data. A promise object that's going to have two properties on it. One is going to be result. Now we're going to see these are both hidden properties, but this result property is going to eventually have back from our background work, well, we'll see, let's just put this object here into our future data label with our results.

[00:10:45]
And for now, that is undefined, we have nothing stored in it. Yeah, Chris? This is something that the fetch API creates, right, enhances all being done by these five letters. The F does the no, no, the E does this. OK. Isn't that wild? All being done by five letters. OK, so. And the really powerful thing about this as well is that these two prongs have an intimate bond between them.

[00:11:16]
Where, when the network response comes back, speaking to TikTok, where, when it gets back with its video links, where will the data, what do we want to have happen on completion? Well, Chris, what do you think we'd like to have, perhaps we got our data back, where would we like that perhaps to show up back in JavaScript on completion? In the future data. On which property? Result.

[00:11:44]
On result, exactly, that's where we'd like it to come back. We would like for future data dot result. Now technically this is a hidden property, so it's actually in our square bracket, square bracket, square bracket, but back on result, we hope we're going to get our data from speaking to TikTok. All of this, people, I think I've hit it all, I think I've hit it all, was set up by these five letters.

[00:12:07]
And this isn't even like going under the hood in a sense of like, oh how intellectually curious, so much as you can probably hopefully see this stuff's all pretty crucial. You've got your work being done in the web browser to speak to the internet, that's pretty crucial. You've got your object being created in JavaScript that's going to have an intimate bond to that background work, such that on completion, hopefully it's going to be updated with that value.

[00:12:45]
That's 5 letters. OK, well I didn't want to get that data back from TikTok for no reason, I wanted to get it back so I could doom scroll videos. I wanted to get it back so I could feel a sense of ennui. OK, so, I need to run some data, I need to run some code, sorry, on that data that comes back. How the heck do I set a function up, some code to run, code has to be wrapped in a function up, that is going to, on this result property being filled in with my data that I get back from TikTok.

[00:13:34]
Some sort of function running. Well, it turns out, I get on my object, this promise object, that's a special JavaScript object as promise object, I get on it, another property, and that one is called, I'm just going to say, well, no, I'm going to call it its full thing for now, fulfill reactions, and it people is an array, an empty array. Full, we'll just call it fulfill, an empty array, people, into which I can add functions that I want to have run, when my data comes back, and that I know that result value will be passed into those functions as the input.

[00:14:25]
OK, that would be pretty powerful. That would allow me to, when I get my data back, to also run some code on that data. So sorry, all of this is still within those five letters. How can I add, do we think, what property, what method, sorry, is available on my future data object that allows me to push, well, perhaps, by the way, perhaps what I could do, could I do this? Maybe I could do future data.

[00:14:57]
How do I get, what method do I have available to me to get stuff into arrays? Ryan, what method is available to get stuff into arrays, in general? Push, exactly. Futuredata.fulfill reactions.push, and I could pass in then, let's say my display function. Because unfortunately, pass in my display function, because unfortunately my fulfill reactions property is a hidden one. I can't just access it directly.

[00:15:24]
But don't panic, can anybody spot, well everyone together, hopefully, everyone together, what method do I get available to me on my future data promise object that I've called future data that I can use to push a function into that fulfill reactions array? What method do I get available to me, everyone together? Then, then exactly, dot then, there it is, that's going to allow me to actually get access to this hidden array and add stuff into it, which is exactly what I'm going to do in my next line, future data.

[00:16:14]
Use the built-in available, and we'll see to well not tomorrow, later today, how we have this function then, which isn't directly on future data, how do we have access to it? Some of you might already know, but we'll see that in the prototype chain to come and pass in the display function directly and that is going to push the display function into, into this there we go, into this fulfill array.

[00:16:56]
Oh my goodness. What a setup. What a flipping setup. That was all with just our fetch built-in two-pronged facade function, it set up work in the background, it created in JavaScript an object for tracking that background work. That object allowed us to also add a function that when that background work completes and gets some sort of URL TikTok thing back, that we'll be able to one, when we fill in that result property, that it will also trigger automatically some code to run on that data.

[00:17:44]
But for now, people, we plow straight on. And we hit at one millisecond, what? Joe, what do we hit at one millisecond? Console log, console log, good old the string me first, me first, and in it goes, me first. OK, at one millisecond, yay. Yeah, go ahead, Chris. Since that interfaces to web browser, that one doesn't go on a work queue. Ah, great question from Chris, that was definitely not teed up earlier.

[00:18:07]
Great question from Chris. Chris said hold on, console is also a web browser feature, we don't have it listed here now, but we did. That's also a web browser feature, so why is that one not setting up? In the background, well it is, but they're not going into the queue, the work involved with it. We don't want to have all of our background API features put work in a queue. In some cases, we want to be able to do that work immediately.

[00:18:35]
Particularly when it comes to dev tool work, we want to be able to see the state, the live data application at that moment. So our console log is one of our web browser features that actually runs directly where it is called. It doesn't actually, it sets up work in the background to speak to the console, but it does so without any work, and of course there isn't a function here delayed, but it doesn't delay the displaying of that text until our global code has finished running and all our execution contents are finished running, because I want to see the state of my application live at that moment.

[00:19:18]
While we were chatting there, our request at TikTok was received, and back came at let's say about, I don't know, 200 and what am I going to say, 270 milliseconds is what I often say, let's say it's 270 milliseconds. Back came a response. Now, in practice, this response will have come back as an HTTP formatted message, and we would then want to do a little bit of processing on it, in fact, the browser will do a bunch of processing on it, but because we're interested here primarily in what we do with that response, while at 0 milliseconds our work was not complete, at 270 milliseconds, our work is now complete.

[00:20:02]
Now we would have got back, and we will be able to work with a JSON object with a bunch of information on it. We're going to keep it simple, and we just got back our, I mean, now I don't even know, because I always do, I always used to do tweets, but now it's video URLs. I'm afraid we're still going to have got back just a nice friendly response from TikTok, a video with the name of, it's just a, what's a good video name of.

[00:20:39]
No, I don't know. Cat meows. Yes. Learn JavaScript in 5 minutes. That's very long. Let's have, I think cute cat. Here we go, cute cat. Cute cat. Came back, yay. I don't know. I don't even like cats, let's have a cute dog. I like cute dogs. Alright, cute puppy. Puppies, there we go, oh, that's even, that's almost more lame. I used to just do hi, but let's do cute. Brady's not approving of the cute puppy.

[00:21:22]
Alright, we're going to have puppy, puppy has adorable trip, no, OK. It's the censorship that bothers us. Cute, cute. What about censorship? OK, alright. Cute, cute puppy. There we go. Our cute puppy video came back, and where is that going to go? Where is that string going to go? Well, it's going to go straight into on completion, our result property on future data. At 270 milliseconds, we get our cute puppy.

[00:22:05]
There it is, on our object. And at that moment, what happens? Well, we have a function ready to execute. And so at roughly 270 milliseconds, we are going to add our display function to the call stack, pass in, note how JavaScript is adding our parens for us, but it's also going to automatically insert the data into that function in the input goes of cute puppy, the string, and our display function is going to execute with cute puppy as its input, and we're going to create together a brand new execution context, execution context, beautiful, into it we go, and in a local memory.

[00:22:46]
We are going to have, we knew, we know how our fetch works, that the associated promise object that gets returned out of it to which we can add a function will receive, that function will receive automatically the data we got back. Knowing that, we made sure the function that we're going to have automatically run has a little placeholder for that. Known, what's the placeholder known as everyone together, a parameter, parameter, well done.

[00:00:00]
Exactly, a parameter, and our parameter's name was what? Ryan? Data. Data, and we are therefore going to know that this is going to automatically pass in, JavaScript, sorry, it's going to automatically pass in the argument, cute puppy. And so when we then console log data, we are console logging cute puppy, and so at 270 milliseconds, what Joe, will we see in our console? Cute puppy.

[00:00:00]
Cute puppy, and we know that's the video for us. Oh my goodness. Oh my goodness. I mean, I do like the colors.