How to access the Value of a Promise in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 4, 2024
4 min

banner

# 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.

index.js
// ๐Ÿ‘‡๏ธ Example promise const p = Promise.resolve('bobbyhadz.com'); p.then(value => { console.log(value); // ๐Ÿ‘‰๏ธ "bobbyhadz.com" }).catch(err => { console.log(err); });

access the value of a promise

The code for this article is available on GitHub

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.
The function we passed to the then method will get called if the promise is fulfilled and the operation is successful.

# 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.

index.js
// ๐Ÿ‘‡๏ธ Example rejected promise const p = Promise.reject('Something went wrong'); p.then(value => { console.log(value); }).catch(err => { console.log(err); // ๐Ÿ‘‰๏ธ "Something went wrong" });

if promise is rejected catch method is called

The code for this article is available on GitHub

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.

index.js
const p = Promise.resolve(13); p.then(value => { console.log(value); // ๐Ÿ‘‰๏ธ 13 return value + value; }).then(value => { console.log(value); // ๐Ÿ‘‰๏ธ 26 return value + value; });

then method always returns promise

The code for this article is available on GitHub

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.
index.js
// ๐Ÿ‘‡๏ธ 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();

access value of promise using async await

The code for this article is available on GitHub

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.

index.js
// ๐Ÿ‘‡๏ธ 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();
The code for this article is available on GitHub

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.

index.js
// ๐Ÿ‘‡๏ธ 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.

index.html
<!-- โœ… 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.

index.js
// ๐Ÿ‘‡๏ธ 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" }
The code for this article is available on GitHub

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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev