Transcript from the "Web APIs & Promises Example: fetch" Lesson
>> 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: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: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: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.
>> 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.
>> Speaker 2: My favorite called stack.
[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.
>> 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.
>> Speaker 2: True.
>> 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?
>> 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: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: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.