Sometimes we want to get data from a promise, such as calling an API from the server side or waiting for the result of an asynchronous task. This article will show you how to do that using the then() function or using async, await. Let’s get started.
Ways to access the value of a Promise in TypeScript
A promise is a proxy for an undefined value. This allows you to associate operators with the final success value or failure of the asynchronous operation.
A Promise is one of these:
Pending: Initial state, incomplete or rejected.
Fulfilled: Mission completed successfully.
Rejected: The operation failed.
To be able to access the value of a Promise in TypeScript, we can use ways such as using the then() method or Async – Await.
Using then()
The easiest way is to use the then() method to get data from a promise. We will call the then() method on a promise object. If the promise is in the fulfilled state, then the callback function inside this method will be executed.
Example:
// This function will return a promise
async function GetAPI(url: string) {
const data = fetch(url);
return data;
}
const promise = GetAPI("");
promise
// Use then() method to get data from a promise
.then((value) => {
console.log(value);
})
// If the promise is rejected, the callback function in catch() will be executed
.catch((error) => {
console.log(error.message);
});Output:
Response {type: 'basic', url: 'http://127.0.0.1:5555/learnshareit.html', redirected: false, status: 200, ok: true, …}In the above example, we create a function to get data from the backend. This function will return a promise in fulfilled or rejected state. We execute this function and assign the return value to a variable named promise. , then we use the then() method to get the return value from the promise in case the promise is fulfilled means that the data has been successfully performed. If it fails, the callback function in the catch( ) will be executed and give us an error message.
Using async, await
Another way to access the value of a Promise in TypeScript is to use an asynchronous programming technique, this way we will use a built-in syntax that is async and await, this syntax will make our code look like synchronous programming for readability, but in fact, TypeScript will handle it asynchronously behind the scenes.
Example:
async function GetAPI(url: string) {
const data = fetch(url);
return data;
}
const promise = GetAPI("");
(async function GetValueFromPromise() {
try {
// Use await inside an asynchronous function to get data from a promise
const promise = await GetAPI("");
console.log(promise);
} catch (error) {
console.log(error.message);
}
})();Output:
Response {type: 'basic', url: 'http://127.0.0.1:5555/learnshareit.html', redirected: false, status: 200, ok: true, …}Summary
Through this tutorial, I am sure you have understood the ways to access the value of a Promise in TypeScript. I think we should use async and await because this is the common and modern way, and also async anymore. I hope this article is helpful to you. Thanks for reading.
Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).