JAVASCRIPT

INTERVIEW

Understanding Promises in Java script

What is a Promise in JavaScript

A Promise is a special JavaScript object. It produces a value after an asynchronous operation completes successfully, or an error if it does not complete successfully due to time out, network error, and so on.

Creating a JavaScript Promise

When the task completes, you either fulfill your promise or fail to do so. Promise is a constructor function, so you need to use the new keyword to create one. It takes a function, as its argument, with two parameters - resolve and reject. These are methods used to determine the outcome of the promise.

Creating a Promise
const myPromise = new Promise((resolve, reject) => {
});

Promise States

A promise has three states: pending, fulfilled, and rejected. The resolve and reject parameters given to the promise argument are used to do this. resolve is used when you want your promise to succeed, and reject is used when you want it to fail. These are methods that take an argument, as seen below.

• Pending: Initially when the executor function starts the execution.
• Fulfilled: When the promise is resolved.
• Rejected: When the promise is rejected.

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

Handling a Promise

Handling Promises With Then Method

Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the then method. The then method is executed immediately after your promise is fulfilled with resolve.

myPromise.then(result => {

});

Handling a Rejected Promise with Catch Method

Catch is the method used when your promise has been rejected. It is executed immediately after a promise's reject method is called.

myPromise.catch(error => {

});

Async Await

Async/await are special syntax to work with promises in a more comfortable fashion.

• async makes a function return a Promise
• await makes a function wait for a Promise

Async

Example
async function myFunction() {
  return "Hello";
}

Is the same as:
async function myFunction() {
  return Promise.resolve("Hello");
}

Await

The keyword await makes JavaScript wait until that promise settles and returns its result. The await keyword can only be used inside an async function.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

The function execution "pauses" at the line (*) and resumes when the promise settles, with result becoming its result.

Implement Promise

const pr1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("hello");
  }, 4000);
});

const pr2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("world");
  }, 0);
});

const fun = async () => {
  try {
    const res = await Promise.all([pr1, pr2]);
    console.log(res);
  } catch (err) {
    console.log(err);
  }
};

fun();

References:

• JavaScript Promise Tutorial
• Async/Await

Thanks for reading!!!