Access the value of a Promise in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 11, 2022

banner

Photo from Unsplash

Access the value of a Promise in TypeScript #

To access the value of a Promise in TypeScript:

  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.ts
// 👇️ const p: Promise<string> const p = Promise.resolve('Example value'); async function example() { try { const value = await p; console.log(value); // 👉️ "Example value" } 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 wait 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 await was 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.ts
// 👇️ const p: Promise<never> const p = Promise.reject('An error occurred'); async function example() { try { const value = await p; console.log(value); } catch (err) { console.log(err); // 👉️ "An error occurred" } } 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.

Alternatively, you can use the .then() method.

To access the value of a promise in TypeScript, 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.ts
const p = Promise.resolve('Hello world'); p.then((value) => { console.log(value); // 👉️ "Hello world" }).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.ts
const p = Promise.reject('An error occurred'); p.then((value) => { console.log(value); }).catch((err) => { console.log(err); // 👉️ "An error occurred" });

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.ts
const p = Promise.resolve('Hello world'); p.then((value) => { console.log(value); // 👉️ "Hello world" return value; }).then((value) => { console.log(value); // 👉️ "Hello world" });

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.

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.