Wait for a Promise to Resolve before Returning in JS

Wait for a Promise to Resolve before Returning #

You can use the async/await syntax or call the .then() method on a promise to wait for it to resolve. Inside of functions marked with the async keyword, you can use await to wait for the promises to resolve before continuing to the next line of the function.

Copied!
async function getNum() {
  const promise = new Promise(resolve => resolve(42));

  const num = await promise;

  console.log(num); // 👉️ 42

  return num;
}

getNum()
  .then(num => {
    console.log(num); // 👉️ 42
  })
  .catch(err => {
    console.log(err);
  });

When a function is marked as async, we can use the await keyword to handle promises in a cleaner way, then using the .then() function or callbacks.

The async/await syntax does not block the execution of all your JavaScript code, rather it runs the code in the function sequentially.

When the await keyword is used in a function, the next line in the function does not get executed, before the promise has been resolved or rejected.

This allows us to reason about async code in a more straight forward way.

You could achieve the same result using the Promise.then() method, but it's a bit more verbose and harder to read.

You will often have to handle a scenario, where the promise is rejected, in this case you can use a try/catch block.

Copied!
async function getNum() {
  try {
    const promise = new Promise((resolve, reject) =>
      reject(new Error('test error')),
    );

    await promise;

    return "This doesn't run"
  } catch (err) {
    // 👇️ this runs
    throw err;
  }
}

getNum()
  .then(num => {
    console.log(num);
  })
  .catch(err => {
    // 👇️ this runs
    console.log(err.message); // ⛔️ "test error"
  });

If an error or a promise rejection occurs in our try block, the error gets passed to the catch block where we can handle it.

Alternatively, you could use the Promise.catch method to catch an error.

Calling the Promise.catch() method is the same as chaining another .then() call and passing a function as the second parameter to the method.

Copied!
async function getNum() {
  try {
    const promise = new Promise((resolve, reject) =>
      reject(new Error('test error')),
    );

    await promise;

    return "This doesn't run";
  } catch (err) {
    // 👇️ this runs
    throw err;
  }
}

getNum()
  .then(num => {
    console.log(num);
    return num;
  })
  .then(undefined, err => {
    console.log(err.message); // 👉️ "test error"
  });

It's good to know that the second parameter to the .then() method is a function that is called if the Promise is rejected, however this syntax is very rarely used.