Introducing Promises

[00:00:01]
>> Will Sentance: So we saw there that we've now augmented our world view of what our JavaScript engine looks like by adding facade functions, known as web browser APIs. That means features of the web browser that we can interface with, interact with, from within JavaScript using these functions that don't really do anything in JavaScript.

[00:00:27]
Instead they're facades for web browser features. When we did so we parsed the design to accept certain inputs. And the first one here in set timer is the function that we want to then parse to the queue. And then back in the JavaScript once the event loop goes, yeah, you are good to go, you've finished running all your synchronous JavaScript code, nothing on the course stack and you finished running your console log there at the bottom.

[00:00:54]
So now that your third functionality that was parsed out of JavaScript to the web browser is allowed back in the Y to call back Q to be executed on the call stack, all right. That was solution two, let's see what our dear friends in the script design team added to this model.

[00:01:15]
They added a readability enhancer, called Promises.
>> Will Sentance: We said that our set time out, I set time out is only doing stuff outside of JavaScript in the web browser. It ain't doing anything of interest in the web browser. Well, promises are two pronged, they do two things. One is outside of JavaScript, in the web browser.

[00:01:44]
They spin up. They get started, some background web browser feature. They get it going. Just like that time I got the timer going. So there's a new type of facade function that yes, does that. But simultaneously it does something in JavaScript. It's going to produce a special object known as a promise object, that's going to be returned immediately.

[00:02:09]
Set time out returns in JavaScript. The blue stuff here is all web browser stuff. It doesn't do anything in JavaScript. These new facade functions, ones like fetch, these new web browser facades for web browser features, they're uploading to Java Script. Like this one Fetch, is going to immediately return something into Java Script, a placeholder object known as a promise, that's gonna have a property on it called value, there's initially nothing.

[00:02:39]
That value is going to automatically be filled in later on when the background web browser task for example going to get data from Twitter, bringing it back. When that background web browser task finishes, it's going to store in that immediately returned object on its value property the data that came back from the server.

[00:03:05]
We're now gonna do two things with these facade functions. One hand we're going to have it set something up in the web browser. JavaScript does not have the ability to speak to the Internet. So it's gonna be a command to the web browser that does to speak from the internet and go get some data.

[00:03:20]
Simultaneously though, unlike set time out that did nothing in JavaScript, instead, we pause at a function to be triggered later on. Instead, we're going to return out an object with a placeholder called value that's gonna be filled in with our data from the background work. And by the way, it's gonna have a property that's hidden, called on fulfillment, that is gonna have functionality that will be triggered automatically in JavaScript when that value gets updated.

[00:03:52]
Promise as a placeholder for data we would get back from the web browser features background work. We also attach functionality, that we want to defer running until the background work is done. We're gonna see the reason for that is if I try to run functionality on the value of that placeholder object the problem is immediately there ain't gonna be any data there.

[00:04:12]
So we need to attach functionality on a trigger when the data comes back to that data on the same object. We're going to see that in a moment. Promise object water is going to trigger that functionality and by the way, the value return for the web browser features work, for example, getting data from the server, will be that attached functionality's input, its argument.

[00:04:32]
We're gonna walk through all of this super precisely but that is the overview.