Unlocking JavaScript's Potential with ES6 Promises

Greetings, fellow coders and innovators!👋

Hey buddy! Just had to share this exciting JavaScript discovery – ES6 Promises! Handling async tasks used to be a nightmare, but not anymore. Promises let me write cleaner, more organized code with easy error handling. They're life-changing! You'll love 'em too. Let's explore the magic of Promises together!

Promise

In JavaScript, a promise is precisely what it sounds like – a commitment to perform something, often asynchronously.

A Promise can be either resolved or rejected, contingent on the operation's result.

Upon task completion, we either successfully fulfill our promise or encounter failure.

To create a promise, we employ a constructor function and use the new keyword.

This constructor function takes a function with two parameters – resolve and reject.

These methods dictate the ultimate outcome of the promise.

Let's see the syntax

const myPromise = new Promise((resolve, reject) => {

});

Let's understand the purpose of resolve and reject parameters

A promise can exist in three states: pending, fulfilled, and rejected.

In our earlier example, the promise remains in the pending state indefinitely because we haven't provided a mechanism to complete it.

To resolve or reject the promise and transition it to one of these states, we utilize the resolve and reject parameters passed to the promise's argument function. These functions are essential for signaling the promise's outcome.

Resolve and Reject Methods

resolve is used when we want our promise to succeed and reject is used when we want it to fail.

These are methods that take an argument, see below code snippet for more clarity

const myPromise = new Promise((resolve, reject) => {
  if(condition here) {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
});

The example above uses strings for the argument of these functions, but it can really be anything.

Let's see the example for more clarity

const myPromise = new Promise((resolve, reject) => {
  let a = 10;

  if(a == 10) {
      resolve("Success");
  } else {  
    reject("Failed");
  }
});

Handle a Fulfilled Promise with then()

Promises are most useful when we have a process that takes an **unknown amount of time in your code **(i.e. something asynchronous), like a server request.

When we make a server request it takes some amount of time, and after it completes we usually want to do something with the response from the server. This can be achieved by using the then().

The then() is executed immediately after your promise is fulfilled with resolve.

Let's see the syntax

myPromise.then(result => {

});

result comes from the argument given to the resolve method.

Let's add then() to our previous example to make it work

const myPromise = new Promise((resolve, reject) => {
  let a = 10;

  if(a == 10) {
      resolve("Success");
  } else {  
    reject("Failed");
  }
});

myPromise .then(result => {
     console.log("The result of the promise is >> "+ result);
})

Output:

The result of the promise is >> Success

Handle a Rejected Promise with a catch()

The catch() is used when our promise has been rejected. It is executed immediately after a promise's reject method is called.

Here’s the syntax

myPromise.catch(error => {

});

error is the argument passed into the reject method.

Let's add catch() to our previous example to make it work

const myPromise = new Promise((resolve, reject) => {
  let a = 1;

  if(a == 10) {
      resolve("Success");
  } else {  
    reject("Failed");
  }
});

myPromise .then(result => {
     console.log("The result of the promise is >> "+ result);
})

myPromise.catch(error => {
     console.log("The result of the promise is >> "+ error);
})

Output:

The result of the promise is >> Failed

Conclusion

That's fantastic! You can already imagine how you can use this Promise to enhance the user experience in your app.

Additionally, make sure to explore the documentation and the examples on the Promise. They provide a wealth of information and inspiration.

I'm glad I could help. If you have any more questions along the way, feel free to reach out. Happy coding!