How to access the return value of the Promise object in Javascript

What is Promise in Javascript

A Promise is an object that indicates that an event of an asynchronous operation has completed or failed.

The Promise object can be in the following state:

• pending
• fulfilled
• rejected

One example of the most widely used asynchronous operation isFetch API. The fetch() method returns a Promise object.

If we get some data from the backend API. For this blog post, I will useJSONPlaceholder– A fake REST API. We will get a user data with id=1.

fetch("/users/1")

Let's see how to access the returned data.

1- then() chain operation

It's the easiest and most obvious way.

fetch("/users/1") // 1
  .then((response)=>())  //2
  .then((user) => {
    (); // 3
  });

Here, we (1) get the data from the API, (2) convert it to a JSON object, and (3) print the user address value to the console.

The results are as follows:

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

2- Use return value in subsequent code

But what if we want to use the return value in the subsequent code?

If we try to do it like this (wrong way!)

const address = fetch("/users/1")
  .then((response)=>())
  .then((user) => {
    return ;
  });
(address);

We'll get

Promise { <pending> }

This result is because the Javascript code is always executed synchronously, so the() function starts immediately after the fetch() request without waiting until it parses. When the() function starts running, the Promise object returned by the fetch() request function is in the pending state.

That is, we can access the return value of the Promise object of another .then() callback function:

const address = fetch("/users/1")
  .then((response) => ())
  .then((user) => {
    return ;
  });
const printAddress = () => {
  ((a) => {
    (a);
  });
};
printAddress();

Or use async/await syntax:

const address = fetch("/users/1")
  .then((response) => ())
  .then((user) => {
    return ;
  });
const printAddress = async () => {
  const a = await address;
  (a);
};
printAddress();

In both ways we will get:

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

in conclusion

Promise objects are widely used in Javascript asynchronous programming. And developers are sometimes confused about how to use it correctly. In this blog post, I've tried to describe a user example, when a developer needs to use an instance of the return value from a Promise object in subsequent code.

Original English link:/ramonak/javascript-how-to-access-the-return-value-of-a-promise-object-1bck

More Chinese reference materials

[1] JavaScript Promise - Javascript tutorial./js/

[2] JavaScript Promise Objects – Programming Technology./w3cnote/

[3] 7.6 Promise – 7. Browser – JAVASCRIPT Tutorial – Liao Xuefeng’s official website./books/javascript/browser/promise/

This is the article about how Javascript accesses the return value of the Promise object. For more related contents of accessing the return value of the Promise object, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!