Web APIs & Promises Example: fetch

[00:00:00]
>> Will Sentance: We had our two prong facade functions, my goodness, weren't they remarkable? And if you remember, I wanna just ask that question we asked right before the break just one more time. Which was, what is our clarification? And I think it was, can anyone remember one of the questions I asked?

[00:00:16]
Was it Todd, you asked? Hold on, what would? Yeah, go ahead.
>> Speaker 2: I guess when that gets onto the call stack?
>> Will Sentance: Yeah, when does that function that was delayed, deferred by being attached to the promise object on fulfillment array? When does that function, given that it's auto-triggered to run?

[00:00:35]
Does it just get great? I mean it's in JavaScript, so does it just go straight in the call stack? No crazy to think, well, we're gonna need to understand the rules by which our promise deferred functionality gets back into JavaScript in order to be execute off. You know what, get back on to the call stack it's in JavaScript.

[00:00:58]
Get back on to the call stack in order to be executed. We're gonna see that here. Let's just quickly reiterate here the then method and functionality, what does it say, then method and functionality to call, yeah, the then method and the functionality to call and completion any code we want to run will return data.

[00:01:12]
The response data must be added on the promise object added using the then method to the hidden property on fulfillment array. Promise objects will automatically trigger the attached function in that array to run with its input being the response data from the web browser feature from Twitter. All right, here we go.

[00:01:34]
Let's see, this is the most complex code we're gonna see today. We'll see this afternoon but this is one I have three functions here in order to I try and minimize the code and just get to the core. But we need three here in order to see the rules by which our asynchronously deferred code ends up being run.

[00:01:55]
And I will, by the way, finalize at the end what this word asynchronous means. I will say it right now. It means doing code out of order from when you saw it, from when it was said to be done. So when we see normal JavaScript code, if a line says do the code, I do it right then.

[00:02:13]
If the line says do the code, I do it right then. Asynchronous says no, no, no, JavaScript's gonna handle when that functionality comes back in. And it's gonna be out of order of when you trigger the browser feature that started its work. And the associated functionality is gonna come back in when that background work is done.

[00:02:31]
No longer do we have our, we cannot leave this line of code until we've finished on it until we've moved to the next line. Now we can actually have code that's gonna be run after all of our regular code is run. Okay, so we're gonna see how all of that plays out here line by line.

[00:02:50]
We've got our traditional ES5 and earlier set time out with a function. It's gonna be thrown down the web browser. We've got our fetch call with the two prongs. With this side, and with this code, and this diagram, we're gonna see the entire map of asynchronicity in JavaScript.

[00:03:10]
Okay, here we go, folks. We're almost at the final hurdle. Not quite. Here we go. Line one, into our global memory we are going to store what, my friend Matt?
>> Speaker 2: The function display.
>> Will Sentance: Excellent, the function
>> Will Sentance: Display, there it is. Saved into global memory. Thank you Matt.

[00:03:38]
Now to Tod next line.
>> Speaker 2: The function print hello.
>> Will Sentance: Print hello. Stored in global memory as well declared and stored in memory. Next line, Ryan, what's it safe for us to do? Clear the function block for 300 milliseconds or 300 milliseconds a block for 30 milliseconds. I'd like to cut these bits for over 300 milliseconds.

[00:04:01]
There it is. That's a fresh block for 300 milliseconds. There it is. And now things get interesting. Now we get to our set timeout. Is it doing anything interesting in JavaScript, people?
>> Speaker 2: No.
>> Will Sentance: No, it's not, this is one of the one-problem ones. Actually, let's put up our web browser over here, right over here.

[00:04:32]
Web browser. We've got, white is JavaScript engine and features. And then you've got over here we have network requests was one of the web browser features built in C++, definitely not in JavaScript. And it's controlled from within JavaScript by this amazing fetch facade function. Then we had console.

[00:05:00]
We also had timer, a feature of the web browser controlled by set time out. But there's a whole bunch of those we know. Okay, so everything below here is going to be not JavaScript but our web browser features. What else have I forgotten from our main platform? Dan, what am I forgetting from my sort of main Java platform?

[00:05:33]
My-
>> Speaker 2: My favorite called stack.
>> Will Sentance: Yeah, don't feel very cool stack. Exactly, there it is. There it is. And we're executing code in global. So there it is. Well, not cool sack. All right, into JavaScript execution we've gone we've had on display print hello block for 300 milliseconds at saving global memory.

[00:05:53]
Now we hit okay, raise your hand if you wanna be the person who verbalizes through, Ethan's been already our expert on this, maybe we'll choose Ethan. That verbalizes through this first facade function set time out. Raise your hand if wanna be the person who mobilizes through this, cuz I'm not looking around, I can't really tell.

[00:06:20]
So, but I can't see Matt there. Matt, tell me what's happening. Anyone has raised a hand fantastic, thank you. But the only person that she feels mad. Given my back was turned. So yeah, Matt, set timeout, where's its consequence?
>> Speaker 2: It's gonna go to the web browser feature, the timer feature.

[00:06:37]
>> Will Sentance: Fantastic, fantastic. Web browser feature.
>> Speaker 2: It's going to send it the duration, the value of zero.
>> Will Sentance: Very nice.
>> Speaker 2: And the function to run print hello.
>> Will Sentance: All right, that was excellent. That was very well communicated, thank you. Yeah, exactly. There's our zero milliseconds. And there's our function to run on the completion of that.

[00:06:58]
Well, let's be more precise nowadays, our function to add to,
>> Speaker 2: Call stack.
>> Will Sentance: The call stack
>> Speaker 2: Callback queue
>> Will Sentance: Callback queue up to the callback queue on the zero millisecond completion, exactly. So let's set up a timer. There it is. Timer, zero milliseconds. Complete at zero milliseconds everybody.

[00:07:25]
>> Speaker 2: True.
>> Will Sentance: Yeah, exactly, yeah. On completion, what What do we want to have run? What do we wanna have taken back into JavaScript, Todd?
>> Speaker 2: Print hello.
>> Will Sentance: Print hello, exactly at zero milliseconds is it complete as you all said? You bet it is. It is complete, the timer on completion we're going to call Print, they should just tell them go to go from front of monsters if I'm currently moving on the front screen of it.

[00:07:58]
No cools. There it is. print hello. is going to be at that moment but let's put it up right now. Let's put it up right now. Cool.
>> Will Sentance: Que. There it is, call back queue. So at zero milliseconds, it's complete. Jeff, what's going to happen to that print hello function on the call stack?

[00:08:24]
>> [INAUDIBLE]
>> Will Sentance: No, callback queue. Excellent Jeff. At zero milliseconds. Exactly. Milliseconds. We're gonna have print hello. I'm sure it's gonna get to run almost like almost immediately, right? Yeah. Send me all that cool stuff so soon. We got is very earnest and eager down here. It's ready to go anthropomorphized.

[00:08:49]
Function is very excited. It's almost I can't wait. Ready to go off onto the call stack. Set timeouts job was done when it set up the timer and the background time his job is done because it put the printer low function in the callback queue. Beautiful shout out to everybody who verbalized says very nice.

[00:09:08]
We now plow on to the The toughee we area gonna plow on to at one millisecond. And try to keep it as neat as possible. Plow into it one millisecond. Left-hand side Ethan, what are we doing in the next line, left-hand side?
>> Speaker 2: Declare the const future data.

[00:09:30]
>> Will Sentance: futureData, there it is, futureData. It is a two-pronged facade. No it's not, it's going to have the result of our fetch call, its JavaScript consequence. As the value of future data, because that fetch call, that fetch facade function, that fetch facade function is a two-pronged facade function.

[00:10:04]
Look network request in the web browser and stuff in JavaScript. Let's look at it stuff in JavaScript consequence. So we're gonna call fetch. There it is, with our just a string, by the way to JavaScript is just a string. Is there anyone that's taken his data down to the browser that it becomes more meaningful?

[00:10:24]
What exactly is it? Twitter twitter.com. We're just going to shorten it slightly. Yeah, there we go. Okay, it's JavaScript consequence, is what Dan what's his JavaScript consequence? It creates a new promise. Yeah, exactly returns out immediately, which therefore gets stored on the left hand side in this one millisecond moment an object, special object.

[00:10:54]
Promise object, and that's gonna be stored over here in future data. And what are
>> Will Sentance: The automatic properties on it, Dan?
>> Speaker 2: Its value and
>> Will Sentance: Unfulfilled which is, which is what a array of exactly an array right now an empty array but it will be an array of function spawned from done well said.

[00:11:24]
There it is. They go to the array and they value property and let's not forget. That value property is soon as it's updated, immediately is going to trigger the function stored in that array to automatically run. Very nice, which is because if we, and by the way. This value property here I have a feeling is going to be intimately connect with the other consequence, the other prong from fetch which is speaking to the network in the web browser.

[00:12:00]
And as soon as that's done, that value that comes back the response object as Kayla put it earlier, is going to fill in that value property Back in JavaScript which is going to trigger automatically any functions in that array with that value as the input of that function, or those functions.

[00:12:16]
All right, perfect. Let's now hand to the other my God, let's now handle the other prong of fetch. Blue pen, it's web browser stuff.
>> Will Sentance: So, just remind us, Brayden, what is the web browser feature that gets sort of turned on.
>> Speaker 2: Network request.
>> Will Sentance: Network request. Well done exactly.

[00:12:43]
Network request. There it is. down it comes, down it comes web browser, here we go,
>> Will Sentance: My best posture, network request. All right, there we go. It wouldn't be a hall pass talk. There it is. Now, we request, what info do we need for it, Adam, at the back?

[00:13:08]
What info do we need for that network request?
>> Speaker 2: The address.
>> Will Sentance: Yep, we've got two parts of interest. Anyone wanna tell me, Brayden?
>> Speaker 2: Domain.
>> Will Sentance: The domain name and-
>> Speaker 2: Directory.
>> Will Sentance: Yeah, the other part of, exactly, the portion of it we wanna get data from.

[00:13:22]
So domain is Twitter .com, path is /will/1, and it defaults to get. And so at roughly 1 millisecond, we start heading off to, where shall we do this? Maybe Hmm, we thought any off I guess down to cube very small. To Twitter's headquarters, Twitter's HQ, look at that, far away.

[00:13:55]
There it is, with that of a message saying hello, I need some new tweets, so those tweets. And we send that off at roughly. Zero milliseconds. Beautiful. There it is. And is it a complete at that point? Do we have the data back, Dan? No, we know we don't want put exactly there it is.

[00:14:17]
But when it is complete, warts Raise your hand. You want to tell me what's gonna happen. Back in JavaScript, what's our own completion back in JavaScript? He was going to show you a pizza please. The returned object is entered into the value property of your data. Very, very nice.

[00:14:34]
We're going to keep it simple and just say a string, the actual tweet itself, but yeah, exactly. That's going to go and fill in the Because future data is where we stored the other consequence of the fetch cool. It's problem that has an effect in JavaScript that lets us keep track consistently with what we're doing in the background.

[00:14:51]
I love that. Look at that consistency, doing something in the background. Got a nice promise object in the foreground, in JavaScript to keep track of it. You know what, it's going to be updated its value property when the background work complete, just as Peter said. So future data, your value will be whatever comes back from the background work, but that background work at one millisecond is so far from being done.

[00:15:17]
And imagine if we had to wait for it in the foreground in JavaScript, or we'd be sitting there for while, probably turning 70 milliseconds. And our language would be very pragmatic, but instead. By the way, well done everybody we almost finished all the fetch stuff relatively, comfortably.