Let’s Go Crazy With Learning JavaScript Promises.

Do you make Promises?

In JavaScript, Promises are like promises in real life. When you make a commitment to your best friend or someone that you’ll make it to their graduation or wedding, you’re promising to do something. When you make a promise, there can be two possible outcomes. One can be, you have fulfilled that promise, or two, you have failed or rejected the promise you made to your best friend. No one wants to fail when making a promise, always want to come out successful and fulfill the promise.

A Promise in JavaScript is an object. That is very simple to know that it is an object, but the object represents a completed or a failed operation that is asynchronous and its value that it brings back as a result. Meaning that the operation is being added to an event queue and will run after it is completed so it doesn’t block subsequent JavaScript code from running. So, Promises are good for when you need to do something that will take a long time in the background.

Now, even though a Promise is an object, it can work as a method. A Promise takes in one single parameter which is a function that will take in two variables, resolve and reject. Those are two results we can have from our Promise. Either the promise is completed which is resolved, or it has failed which is rejected. This means a Promise can be in certain states.

Possible States:

1. Pending: Promise is waiting for the operation to be completed
2. Fulfiled: The Promise became a success.
3. Rejected: The Promise got a result of a failure.

Here Below is the syntax of how a JavaScript Promise would look like:

You can see that we assigned a Promise to a variable using the new keyword and inside Promise, we have passed in a function and that function takes two parameters called resolve and reject. Inside the function, we have some type of test so that way we can bring back either a resolve result or a rejected result. If the test passes, we can use resolve. Resolve takes in any value, so we can pass anything we want, which is a message in the example saying ‘Success’. If the test fails, we can use reject, and do something similar with passing in a message saying ‘Failed’. You now have a Promise in JavaScript.

Interacting With Promises.

Now that we have a Promise, you can interact with it.

With JavaScript Promises, you can chain methods onto your Promise using then, catch, or finally. These are called Chain Promises, they are used to make actions when a Promise or the operation has been done. In other words, this means I want to do this type of action when my Promise has succeeded, and if my Promise fails I want to do this type of action. The then method is going to be called when the Promise resolves or it is successful, and the catch method will be called if the Promise has rejected or fails.

Two Chaining Methods:

1. Then: A function, that takes in a function to be executed when a Promise has been fulfilled.
2. Catch: A function, that takes in a function to be executed when a Promise has been rejected.

Here below is an example using these two methods on the Promise that was seen earlier.

You can see in this example that we have chained the then method on the Promise. The method is taking in a function and that function takes in a message parameter and inside the function, it's saying print this message to the console when the Promise is successful. With catch, we have done the same and it takes in a function with a message passing into that function, saying do this action, print this message to the screen when the Promise has been rejected.

This is exactly how you use Promises, they are very similar to callbacks but just a little cleaner way of doing callbacks. I hope this article was helpful for you with learning about JavaScript Promises.

We have touched on key things like:

1. A Promise is an object that will eventually bring back a value when it is completed.
2. A Promise is either in one of the three states, pending, fulfilled, or rejected.
3. Can chain methods on to a Promise to do some action and return a value when the operation is done using, Then and Catch methods.

Thank you for stopping by, continue to look into JavaScript Promises and what other things you can do with them.