I'm going to bump up the complexity a little bit and talk about something called promises. Let me first get rid of all the code that we've added in here so far, and we'll start fresh. So promises were introduced in ES6 and are a way of implementing asynchronous and non-blocking patterns in your code. In order to get started with them, we can create a promise at a variable. So we can say let myPromise is equal to new Promise. And the only argument this Promise class expects is an anonymous inline function, which itself has two arguments, resolve and reject. And we're using error notation here to create that function. Now inside of this function is where we would call code that we want to have running asynchronously. Something useful for that might be calling an API. Usually those take a few seconds and could create some blockages in your application's flow. So we can use a promise to offload that and continue on with our code's

that might be calling an API. Usually, those take a few seconds and could create some blockages in your application's flow. So we can use a Promise to offload that and continue on with our code's execution. In order to mimic this, let's just call setTimeout. And that expects an anonymous function as well. And inside here is whatever is called after two seconds is up. So let's say that after two seconds we get a successful callback from an API with like a user object. Well what do we do next? What we do is use one of these arguments presented in the Promise class. resolve means that we return the promise back with the all clear, there were no errors or anything found, and reject is the opposite. Something failed inside of the promise and it's throwing an exception back. We'll handle the rejection later. For now, let's pretend everything returned all clear and we want to give the user back some data from the API. So we can resolve and inside of this, we pass in whatever.

handle the rejection later. For now let's pretend everything returned all clear and we want to give the user back some data from the API. So we can resolve and inside of this we pass in whatever we want to pass back to the user from the promise. So let's just say user and we'll create that object up here. So on initialization of this script a promise is created and after two seconds this promise is resolved passing in the user object. Okay well how do we use this promise and retrieve that user object? We do that with something called method chaining. So using the variable we created for this promise, myPromise, we then chain on the then method. And this just has one argument, which is whatever is returned back from the promise. In our case that's the user object. And kind of fitting the theme with the rest of this video, it uses an inline anonymous function as its only argument. So now we should be able to do something with this user object that we have.

And then this line of code will fire afterwards. So let's see that in practice. Let's head back to our browser. And refreshing, we see that text appearing here. And after two seconds, we have the user data that replaced it. So exactly what we expected. So okay, the then keyword happens whenever a resolve happens here. But I had mentioned earlier that we also have this reject method that we can pass in instead, if something happens inside the promise where we want to throw an error. So instead of resolving to the user, let's instead reject a message back that says, sorry, could not retrieve the user. Well, now let's see what happens. After two seconds, nothing is changed on the front end. But if we open up the console log here, we have an uncaught exception in a promise. Sorry, could not retrieve the user. And uncaught being the keyword here, we should handle these exceptions that come back from our promises.

we have an uncaught exception in a promise. Sorry, could not retrieve the User. And uncaught being the keyword here, we should handle these exceptions that come back from our promises. So back here, chaining on from the then method, we can call catch. And like then, its only argument is an inline anonymous function that has just one argument, which is the error that we're getting back from the rejection. So in our case, that's an error. And let's just replace that output with the error in question. So now going back to our browser one more time. After two seconds, we see the error coming back because we implemented that catch method. And our console.log is now cleared up. Now I had mentioned previously that this is called method chaining. And that's because we can have multiple then methods that call other functions.

And our console log is now cleared up. Now I had mentioned previously that this is called method chaining. And that's because we can have multiple then methods that call other functions that use promises. Let me show you what I mean by that. So let's say that after getting back a User object, we'll comment this out and uncomment out our resolve, that we want to do something with that user, like maybe call another external API, something that will take another two seconds or so. Let's create a function for that. We'll call it getAdditionalUserData. And it's a function that will need our User object. Remember that we don't need parentheses. So we can just say user and open it up with brackets. Now this function is going to return a new promise. And like before, we use resolve and reject and open up an anonymous function for that. Because this is returning a new promise, instead of initializing it with

return a new Promise. And like before, we use resolve and reject and open up an anonymous function for that. Because this is returning a new Promise, instead of initializing it with a variable like we're doing down here, we can just call this whole function and it will act like a Promise instead. So it kind of lets us skip a step. Now in here, we'll set another timeout that pretends like we're calling another API. So we'll create some kind of fake data object. AdditionalData sounds good. And we'll return back favoriteColor. And currentDrink. And just like our previous Promise, we will resolve this after two seconds with setTimeout. Instead of calling additionalData here, what I'm going to do is tack on these attributes to our original user object. That makes more sense for what I'm doing.

Instead of calling additional data here, what I'm going to do is tack on these attributes to our original User object. That makes more sense for what I'm doing. And the reason that I did that is because I want to make sure that I'm not doing anything wrong. And the reason that I did this is to show off kind of how method chaining works. So what we're going to do here is this inline anonymous function that we're using, we're instead going to replace that with the getAdditionalUserData function that we just created. So let's move this out of here. So we can see how our app is working in the browser. And then after the then keyword in my promise, we can just call getAdditionalUserData. But we need to do something when that promise resolves as well. Because right now how this works is that this then method is waiting for my promise to resolve. And after it does,