How to access the Value of a Promise in JavaScript

avatar

Borislav Hadzhiev

Thu Dec 23 20213 min read

banner

Photo by Hannah Cenusa

Access the value of a Promise in JavaScript #

To access the value of a promise, call the then() method on the promise, e.g. p.then(value => console.log(value)). The then() method takes a function, which is passed the resolved value as a parameter.

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

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

To resolve the promise, we called the then() method on the promise object.

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 - 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 was successful.

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" });

In this example, we used the Promise.reject method to get a rejected promise.

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

Note that 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; });
If you don't return a value from the callback function, you implicitly returnundefined, 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.

To access the value of a promise:

  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('Hello World'); async function example() { try { const value = await p; console.log(value); // ๐Ÿ‘‰๏ธ "Hello World" } catch (err) { console.log(err); } } example();

By marking a function as async, we are able to use the await operator in it.

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

An easy way to think about it is - when the await operator is used, our code in the particular function stops on the line where awaitwas used until the promise is fulfilled or rejected.

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

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();

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('Hello world'); try { const value = await p; console.log(value); // ๐Ÿ‘‰๏ธ "Hello world" } catch (err) { console.log(err); }

The top level await syntax is available in Node.js, if your Node version is higher than 16.12.0.

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's very important to use a try/catch block, because an uncaught exception caused by a rejected promise might crash your application.
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" }

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee