Web APIs & Promises Example: then

[00:00:00]
>> Will Sentance: But there's one more bit. If we're filling in, as Peter says, that value property with the data from Twitter, string hi, then we wanna be able to use that in some way, display it, make use of it. Mark, can you help me out? If I know that when that value property gets updated, it's going to automatically run any function in this unfulfilled array.

[00:00:25]
How do I get a function into this hidden unfulfilled array? What method am I given to get a function into that unfulfilled array, Mark?
>> off-screen male: .then
>> Will Sentance: .then, the then method. Exactly right. The promise of it is designed by JavaScript to automatically trigger the functions in this array to run with this value as its input when that value gets updated automatically by JavaScript, okay.

[00:00:47]
So let's do that attachment right now. FutureData.then, we pass in the entire reference, we'll link to the entire display function. There it is, the entire display function. We're gonna grab it and store it into, should I do a line here? And grab it and store it into, I know what I'll do.

[00:01:14]
Gonna grab it and store it into, so future data is this pink object here. We're gonna grab it and store it into array unfulfilled, in that promise object. So we're gonna grab display and [SOUND] using sound effects, right? In it goes into the unfulfilled array, there it is.

[00:01:36]
The display function. So that means that when the background work completes, the value property gets updated, it's automatically gonna trigger display to run, where display's input being the returned or the response object which is gonna be just that Tweet, the string hi. And it's gonna fill in by the looks of it into display, they've got a little parameter waiting.

[00:01:59]
Data can be filled in with the string hi, the argument. Very nice. [SOUND] Good, we have set up two pieces of background work. One of them's already complete and landed in the queue, the associated function, ready to run. I'm sure it's gonna run any moment now. As we head on to at 2 milliseconds, we're going to execute what function?

[00:02:29]
Jason, at 2 milliseconds, we just finished our FutureDays.then, we're gonna run what function at 2 milliseconds, Jason?
>> off-screen male: We are going to run display or assuming we're one line below, BlockFor300ms.
>> Will Sentance: BlockFor300ms, he's spot on. There it is, BlockFor300ms. Brand new. [LAUGH]
>> Speaker 3: Execution context.
>> Will Sentance: Beautiful people, exactly!

[00:02:54]
Brand new execution context for running BlockFor300ms. It's going on our call stack, we're gonna go through people, it's gonna fun to erase it in a moment. BlockFor300ms, into it we go. And, in we go, it's gonna add 300 milliseconds, but you won't believe it. While we're inside there, you won't believe what happens down here.

[00:03:24]
Good news people. Good news.
>> Will Sentance: Our dear friend from Twitter has come riding back and said at roughly 270 milliseconds, hey, I've got tweets. I've got tweets and at 270 milliseconds, there it is, it's complete. And what do we bring back? What's our tweet, Peter?
>> off-screen male: The string hi.

[00:03:49]
>> Will Sentance: The string hi, of course it is. There it is, the string hi. Okay, now, stuff gets interesting. When hi returns or gets responded back from speaking to the Internet, Mark, what own completion is gonna happen?
>> off-screen male: FutureData.value.
>> Will Sentance: It's gonna be [CROSSTALK] exactly, which is gonna trigger, Kayla, what function to run on the call stack?

[00:04:15]
No.
>> off-screen female: No, on the queue.
>> Will Sentance: That's sounds eminently reasonable, which is surely a sign.
>> [LAUGH]
>> Will Sentance: What we're sure is that it doesn't go straight on the call stack, no way. There's no way it can, right, because we've got BlockFor300ms right there. We're right now at roughly, what would it be?

[00:04:34]
We're at roughly, I don't know, what is it, 270 milliseconds in here, or something around. That's at the point that we're in right now. Hold on, we can't suddenly throw display on the call stack. So let's for now, let's note, yes, exactly. On to the callback queue it goes.

[00:04:53]
I'm sure that must be correct. That sounds very logical. And that's like 270 milliseconds. Okay, BlockFor300ms continues running. We exit out, and what would that be everybody, 302 milliseconds, yeah, roughly. Probably, exactly, roughly, whatever. 302 milliseconds, let's get this off the call stack. Let's get BlockFor300ms off the call stack.

[00:05:23]
By the way everybody, all so good so far, nothing we haven't seen before at 302 milliseconds. printHello has been sitting there waiting for literally 302 milliseconds. I assume now it's allowed to run, right?
>> off-screen male: No.
>> Will Sentance: No? This is insane, so what's gonna run at this point, Brayden?

[00:05:46]
>> off-screen male: The me first, on the display. [LAUGH]
>> Will Sentance: I see brain sensitization now. Definitely the console is gonna log me first at this point, yeah, absolutely. So the me first., we know that our asynchronous code is gonna get priority. We could do a million of those, always priority.

[00:06:03]
So at 302 milliseconds, we get me first. That is it, right, at 302 milliseconds, we get console.log(Me first!). Now, things get interesting.