Introduction to JavaScript Promises. A Promise is a special JavaScript object that represents a future value. On the screen, I have this circle representing the Promise object. When the Promise is created, its initial state is pending. This works like a real-world Promise. If I were to promise to get you food, the outcome of whether or not you will receive that food is pending.

Next, the Promise will go through a settlement process, which will return one of two states. It will either be fulfilled, the operation was completed successfully, I brought you that food, or it will be rejected, the operation failed, I never brought you that food. When the Promise is fulfilled, we then settle that fulfillment using a then statement. You received the food, then you ate it. When the Promise is rejected, a then statement could be used to handle the rejection. But typically, a catch statement is used to catch the error.

Now, some built-in JavaScript functions and web APIs will return a Promise object. JavaScript also has a Promise constructor that can be used within functions to return a Promise object. Transitioning to the code editor, I'm gonna create a function that returns a random number using a Promise. I will begin by typing const getRandNum = =>. Now, inside of the arrow function, I'm gonna invoke the Promise constructor, return new Promise parentheses. So this is just like a regular object constructor, where I have to use the new keyword to instantiate this. The Promise constructor takes a function as a argument.

So, now, I will put in that arrow function that's gonna begin with two arguments, parentheses resolve, reject => {}. The resolve argument is invoked when the Promise is fulfilled. I'm gonna resolve a random number generator. I will type resolve parentheses, and I will pass this argument, Math.floor parentheses Math.random parentheses * 10. And this is a function that will return a number between one and 10. Now this Promise function is ready to test out.

So, down below, I'm gonna type getRandNum parentheses. Next, I'm gonna chain the then statement. When the Promise is fulfilled, the then statement is used to settle the data. .then. And the then statement takes a function as a argument. So, number => console.log number. Number is the value that is returned by the Promise object. And now, I will execute the function call. And to the right is the number two. And this works. But what would happen if I didn't use the then statement? I'm gonna convert this function call to a variable value.

I'm gonna comment out the then statement, and to the left of the function call, I will type const number = getRandNum. And I will console.log the number and execute this again. And to the right is the Promise object. Without the then statement, you will always get the Promise object. The then statement is needed to access the result. I'm gonna undo the changes I just made and put the function call back to its previous state.

So how is a rejection handled with a Promise? Below the resolve statement, I'm gonna add a reject statement, reject parentheses. And as a argument for the reject statement, I'm gonna put in a broken random number generator. I'm breaking this code by omitting the mandatory parentheses after the random method. Going back to the function call below, I'm gonna chain the catch statement to the then statement. .catch passing through an arrow function as a argument, error => console.log error. The goal is to catch the error. I will execute this function again, and there's a value of three.

I was expecting a not a number error, so what happened? Promises are useful when dealing with situations where you might not get a result, such as requesting data from a server, and the server is down. The random number generator in the resolve statement is never gonna fail. And because of that, the reject statement will never have a opportunity to execute. So for demonstration purposes, I'm gonna comment out the resolve statement and I will execute this function again. And there's the NaN error message, which stands for not a number. And that's it. Thanks for watching, at Cloud Academy.