Transcript from the "Promises Example: then" Lesson
[00:01:19] And usually into it you can store an array of functions here, we can put in a function. And any function we stick in this array will be automatically triggered to run when the value property gets updated. And wait for it, that data in the value property will be auto inserted as the input, as the argument to fill in the parameter of any function that's stored in here.
[00:01:42] So take a look at that display function there, got a little parameter their data. If we could just get display to be stored in that array, it would be automatically run and our data that came back would fill in, that data parameter when it's auto run when display as auto run.
[00:02:02] But how would we get display into that array? How do I typically actually magenta to match on this map? How would I typically add to what method? Do I have to add two arrays?
>> Speaker 2: Push.
>> Will Sentance: Push. It's on the unfulfilled properties. You just sort of think what would I do typically.
[00:02:19] Future data, dot.
>> Speaker 2: Dot, unfulfilled, dot, push.
>> Will Sentance: Dot, push and then pass in the display function. We can't do that unfortunately but it's fundamentally, yeah, exactly right. We can't do that. Did anyone spot why we can't do that from what I said earlier? Tom?
>> Speaker 2: It's a hidden property.
[00:02:59] And what can people spot might be that hidden, not that hidden. What can you spot might be that method that sticks a function into that unfulfilled array, Peter?
>> Speaker 2: Then.
>> Will Sentance: Exactly, the Then method, the dot Then method, exactly, and that's what we're going to see. By the way, we're also going to see in a moment later on, we're gonna see a little bit later on, where's that method come from?
[00:03:22] Because it ain't on here. It isn't on this object? We'll see, for once we're in a session that so long, we're gonna see where that method actually comes from this afternoon. There we go. But for now, let's exactly do that line there. Let's get something that's going to function in here.
[00:03:53] So here we go, future data dot then passing the entire display function definition. Okay, so future data is this object here. It has an unfulfilled property. I'm not gonna put all the property names and we've got the unfulfilled property and whatever gets passed to then, it's just going to be nabbed, sorry.
[00:04:31] Is that a word in America? It is.
>> Speaker 2: Yes.
>> Will Sentance: British word like a 19th century cottony word is going to be taken. Whenever it's parser there's gonna be taken and stuck in there. And that's exactly what we do. We take the display function and stuck into the unfulfilled array.
[00:04:53] Let's put it in. There it is, our display function in the unfulfilled array. Look at that, isn't that beautiful? My goodness. [LAUGH] Aha, that was all achieved by those two lines. But has this goddess all set up? You bet it has. We have all our setup now. We're speaking to the Internet in the background.
[00:05:39] We get to plow on to at roughly, let's say one millisecond. What line over to. Ethan, what line do we hit at one millisecond?
>> Speaker 2: Console log, me first.
>> Will Sentance: Fantastic, I love everybody staying so. Focus as well exactly, console log('Me first'), there it is in a console.
[00:06:05] And we have, Me first. There it is at 1 millisecond.
>> Will Sentance: The one thing I regret on this is this bit here being so close to the manic creation to the right. So let's move this slightly. Sense of readiness, that's how long a half marathon is, right?
>> Will Sentance: 3 miles, 3 miles.
[00:06:34] My sister's doing a full marathon in March, dear, whatever. Very proud of her, very proud, very proud. So which one are we using here? We're using the network request feature, weren't we? What was the label, everybody?
>> Speaker 3: Fetch.
>> Will Sentance: Fetch, exactly, yeah, fetch.
[00:07:24] We got data back, a message back from Twitter at 270, complete and it came back. Okay, simplified slide here, came back as a beautiful little string here, Hi. On completion, that's what came back. And she comes back in an object for he says package into an object form but we can get the property on which that data is.
>> Speaker 2: Future data value.
>> Will Sentance: Future data value property spot on. And at that, he's gonna trigger what to run, Todd?
>> Speaker 2: The unfulfilled functions.
>> Will Sentance: Yeah, the unfulfilled functions, well put. Which is specifically, here is our?
>> Speaker 2: Display.
>> Will Sentance: Display function, with what as its input?
>> Speaker 2: The value.
>> Will Sentance: Fantastic, the value property which is the value, the string?
>> Speaker 2: Hi.
>> Will Sentance: Hi. Excellent from Todd, very very nice. So here we are, way later at 270 milliseconds. 270 milliseconds, we are going to call, and you may already be going, hold on, really? What? We'll just put it on the call stack.
[00:08:56] We're gonna call display with the input of hi, there it is. Some of my colors starting to become. Display with the input of hi, and brand new. Everybody?
>> Speaker 3: Execution context.
[00:09:27] So and into it we go and then it's local.
>> Will Sentance: Memory is what's the data that goes in, Todd, is just remind us again. The value is?
>> Speaker 2: High.
>> Will Sentance: High, but inside display, what's the label for it?
>> Speaker 2: Data.
>> Will Sentance: Data, yeah, spot on. There it is.
[00:09:51] Data, and then we console log data which is to say we console log, Todd?
>> Speaker 2: High.
>> Will Sentance: High, Todd's not tired of saying high. There it is, and at 270 milliseconds, people. We have a console log. Hi, my goodness. My goodness. [LAUGH] My goodness, look at that. All of that initiative bar incredible fetch function are incredible, not function.
[00:10:49] And when it did come back, we don't know who's gonna come back, don't panic. We had a function ready to be auto run, with the input being that value property that came back or the value of the data that came back from Twitter. As the input of that function at 230 milliseconds display was stuck on the cool side with high input and we were able to console log hi.