How to access the Value of a Promise in JavaScript

# Access the value of a Promise in JavaScript

Use the Promise.then() method to access the value of a promise.

The then() method takes a function, which gets passed the resolved value of the promise as a parameter.

Copied!
// 👇️ Example promise
const p = Promise.resolve('bobbyhadz.com');

p.then(value => {
  console.log(value); // 👉️ "bobbyhadz.com"
}).catch(err => {
  console.log(err);
});

We used the Promise.resolve() method to get an example promise.

We called the then() method on the Promise object to resolve the promise.

The function we passed to the then() method gets called with the resolved value as a parameter.

We can access this value in the body of the function.

Notice that we also used the catch() method.

This is because a promise can have 3 states:

1. pending - initial state, neither fulfilled nor rejected.
2. fulfilled - the operation was successful and the promise is resolved.
3. rejected - operation failed.

# If the Promise is rejected, catch() is called

If the promise is rejected, we can access the reason (error) for the rejection in the catch() method.

Copied!
// 👇️ Example rejected promise
const p = Promise.reject('Something went wrong');

p.then(value => {
  console.log(value);
}).catch(err => {
  console.log(err); // 👉️ "Something went wrong"
});

We used the Promise.reject() method to get a rejected promise.

This time, our catch method was invoked and got passed the reason for the rejection.

# The .then() method always returns a Promise

The value you return from the function passed to the then() method is wrapped in a promise, so you can chain as many calls to the method as necessary.

Copied!
const p = Promise.resolve(13);

p.then(value => {
  console.log(value); // 👉️ 13

  return value + value;
}).then(value => {
  console.log(value); // 👉️ 26

  return value + value;
});

If you don't return a value from the callback function, you implicitly return undefined, which gets wrapped in a promise and returned by the then() method.

Alternatively, you can access the value of a promise by using the async/await syntax.

# Access the value of a Promise using async/await

To access the value of a promise using async/await:

1. Define an async function.
2. Use the await operator to await the promise.
3. Assign the result of using the await operator to a variable.

Copied!
// 👇️ example promise
const p = Promise.resolve('bobbyhadz.com');

async function example() {
  try {
    const value = await p;
    console.log(value); // 👉️ "Hello World"
  } catch (err) {
    console.log(err);
  }
}

example();

We can use the await operator because we marked the function as async.

The await operator is used to wait for a Promise to be fulfilled or rejected.

An easy way to think about the await operator is that:

• When the await operator is used, our code in the particular function stops on the line where await was used until the Promise is fulfilled or rejected.

This makes our code much easier to read compared to using the then() method.

# Handling rejected promises in async/await

Notice that we wrapped the operation in a try/catch block.

This is because, if the promise gets rejected, we want to be able to access the reason in our catch block.

Copied!
// 👇️ Example rejected promise
const p = Promise.reject('Something went wrong');

async function example() {
  try {
    const value = await p;
    console.log(value);
  } catch (err) {
    console.log(err); // 👉️ "Something went wrong"
  }
}

example();

We used the Promise.reject() method to get a rejected promise.

When we tried to await the promise, our catch function was called and passed the reason for the rejection.

There are many use cases where you might want to use the await operator outside of a function.

Copied!
// 👇️ Example promise
const p = Promise.resolve('bobbyhadz.com');

try {
  const value = await p;
  console.log(value); // 👉️ "bobbyhadz.com"
} catch (err) {
  console.log(err);
}

The top-level await syntax is available in Node.js if your Node version is 16.12.0 or more recent.

If you intend to use top-level await in the browser, check out the caniuse table for browser support for top level await.

At the time of writing, the top-level await operator can be enabled for most modern browsers by loading the JavaScript file as a module in your HTML file.

Copied!
<!-- ✅ Your JS script here ✅ -->
<script type="module" src="index.js"></script>

Notice that we set the type attribute to module.

When using top-level await, it is very important to use a try/catch block because an uncaught exception caused by a rejected promise might stop your application from running.

Copied!
// 👇️ Example rejected promise
const p = Promise.reject('Something went wrong');

try {
  const value = await p;
  console.log(value);
} catch (err) {
  // 👇️ catch the error here
  console.log(err); // 👉️ "Something went wrong"
}

If a rejection of a promise is not handled, e.g. in a catch block, your server might be in an inconsistent state.

It's a best practice to use a try/catch block when working with the await operator.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Wait for a Promise to Resolve before Returning in JS
• How to use await outside of an async function in JavaScript
• Check if a Value is a Promise using JavaScript
• How to Check if a Function is Async in JavaScript
• How to Wait for a DOM element to Exist in JavaScript
• Resolve a Promise after a Delay in JavaScript