Javascript: How to access the return value of a Promise object

Originally posted on my personal blog.

Intro (completely off-topic)

It's has been almost 3 months since my last blog post. There are reasons for that.

First, despite all precautions, I got sick with coronavirus (COVID-19) in the second half of June 2020. For two weeks it was total hell. Very bad well-being, I could only lie in bed and hope that it will go away soon. After that, it was a recovery for the next 2-3 weeks. Now I'm finally got back to normal life and even resumed my fitness training. So, coronavirus is no joke. Please, stay safe.

Second, there are lots of things happening right now in my home country - Belarus. Belarussians are fighting against dictatorship. Our (ex)-president lost last elections which were held on August 9th, 2020, but he continues to stay in power using brutal police and army forces against peaceful people and to threaten to anybody who disagrees with him. But we keep on fighting and to protest every day. I do take all these events very close to heart and hope to wake up one day in a free, democratic, and prosperous Belarus.

Now back to the topic.

What is a Promise in Javascript

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

A Promise may be in one of the following states:

• pending
• fulfilled
• rejected

One of the most widely used examples of asynchronous operations in Javascript is a Fetch API. The fetch() method returns a Promise.

Assume that we fetch some data from a backend API. For this blog post, I'll use JSONPlaceholder - a fake REST API. We will fetch a user's data with the id = 1:

fetch("https://jsonplaceholder.typicode.com/users/1")

Let's see how we can access returned data.

1 - .then() chaining

It is the most simple and the most obvious way.

fetch("https://jsonplaceholder.typicode.com/users/1") //1
  .then((response) => response.json()) //2
  .then((user) => {
    console.log(user.address); //3
  });

Here we (1) fetch data from the API, (2) transform it into JSON object and then (3) print user's address value to the console.

The result is:

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

2 - Use returned value later in a code

But what if we'd like to use the returned value somewhere later in code?

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

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });

console.log(address);

We'll get

Promise { <pending> }

It's happening because the Javascript code always executes synchronously, so the console.log() function starts immediately after the fetch() request, not waiting until it is resolved. In the moment when console.log() function starting to run, a Promise that should be returned from a fetch() request is in a pending status.

That said we can access the returned value of a Promise object in another .then() callback:

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });

const printAddress = () => {
  address.then((a) => {
    console.log(a);
  });
};

printAddress();

OR using async / await syntax:

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });

const printAddress = async () => {
  const a = await address;
  console.log(a);
};

printAddress();

In both ways, we'll get:

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

Conclusion

A Promise object is widely used in Javascript async programming. And it's sometimes confusing for developers how to use it properly. In this blog post, I've attempted to describe a use case when a developer needs to use a returned value from a Promise object somewhere later in code.

Comments

[stefcab]

You could even simplify without using an other function:

const printAddress = () => {
  address.then((a) => {
    console.log(a);
  });
};

to

address.then((a) => {
    console.log(a);
  });

[Irina Kats]

I am another one who created an account to say Thank You to Kate for the article and @davestewart for amplifying it! I've been having this trouble too and wanted to understand what I am doing wrong. Now I seem to understand it.

[eldhose]

thanks!

[Dave Stewart]

It's really important to note that the Promise object doesn't return a value, it resolves a value via the then() method.

It is the fetch() function that returns a value, which is a Promise instance.

It is the Promise instance on which you call the then() method, passing in a callback function, which will be eventually be fired when the async code finishes (and internally, calls resolve()).

As an example, here's what a custom load function might look like:

function load (url) {
  return new Promise(async function (resolve, reject) {
    // do async thing
    const res = await fetch(url)

    // your custom code
    console.log('Yay! Loaded:', url)

    // resolve
    resolve(res.json()) // see note below!
  })
}

// run the function and receive a Promise
const promise = load('https://...')

// let the Promise know what you want to do when it resolves
promise.then(console.log)

Note that the Promise object will resolve any nested promises as part of its work, so resolving res.json() which results in a Promise being created will be resolved internally before the final chained .then(console.log) is called.

The trick to Promises is:

1. always return Promises you create (or functions that return Promises) so they can be chained
2. always resolve() or reject() within the promise executor so .then() or .catch() will be called and the chaining will complete

[uzoma]

Created an account just to say thank you for this breakdown.

[Dave Stewart]

Well that's very kind of you. I'm glad it helped!

[Sadaf Sajad]

Hi, Kate
Can you please help me with this one
i receive data from an axios call collect it in a variable and return it when i call the function i receive data as promise like you showed
i put async await everything you said but this isn't working

$(document).ready(function () {
merchantDetails;
var load = merchantDetails(userName)
console.log(load)
})
merchantDetails = function (userName) {
var axiosResponse = axios.get("/adminMerchantOrderDetails/merchantDetails?username=" + userName).then(function (response) {
let order = response.data.responseData;
return order
console.log((order))
})
return axiosResponse
}

[Katsiaryna (Kate) Lupachova]

Hi Sadaf! It's kinda hard to understand this unformatted piece of code. Could you please provide a link to a codesanbox, GitHub repo or something like that so I could take a look and try to help you?

[TomKnn]

Hi Kate,

Thanks for the article.
I only get results when I write down the code (with my own api endpoint) like this:
fetch("https://api.spoonacular.com/recipes/complexSearch?number=2&apiKey=b4408aa9ab144e47ae2bf8eff93e72f5")
.then((response) => response.json())
.then((user) => {
console.log(user)
});

I don`t understand what you mean by console.log(user.address) or how to adapt this into your own code.

Anyway, from the results:
results: Array(2)
0: {id: 716426, title: 'Cauliflower, Brown Rice, and Vegetable Fried Rice', image: 'spoonacular.com/recipeImages/71642...', imageType: 'jpg'}
1: {id: 715594, title: 'Homemade Garlic and Basil French Fries', image: 'spoonacular.com/recipeImages/71559...', imageType: 'jpg'}
length: 2

I want to make an array with only the recipe numbers, something like this:
recipeArray = [716426, 715594] and use this for a declaration like let defaultIndex = recipeArray[0];- for another piece of code.

Do you know how to do this? I`d be very grateful.

[Katsiaryna (Kate) Lupachova]

You can try something like that:

const getRecipes = async () => {
fetch("https://api.spoonacular.com/recipes/complexSearch?number=2&apiKey=b4408aa9ab144e47ae2bf8eff93e72f5")
.then((response) => response.json())
.then((user) => {
const recipes = user.results.map(result => result.id)
console.log(recipes)
return recipes
});
}

const recipes = await getRecipes();

You'll get an array of recipe ids.

[TomKnn]

Hi Kate,

Thank you so much for your time and trouble, I appreciate!
I've tried your code but I get this error because of the 'const recipes = await getRecipes()' line:
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Do you have any suggestions? Api fetch is pretty new to me and my vocabulary with this is limited.

[Katsiaryna (Kate) Lupachova]

could you please DM me or provide me a link to your code somewhere online (github repo, code sanbox and so on), so I could take a look and try to help you?

[TomKnn]

Sure, it`s github.com/TomKnn/EindopdrachtMood....
To give you some context, I'm re-educating from illustrator/'art'teacher to front end developer due to lack of work opportunities. I like it very much but the course is online with little help, I'm stuck for months now on little things.
This is my final assignment where we have to a modest site design with an api function.
It's a bit of a mess, but I'll tweak it as soon as my code works.
The files you need are here github.com/TomKnn/EindopdrachtMood...
And here is the main.js where I want to import the function.
github.com/TomKnn/EindopdrachtMood...

Pls let me know if something is unclear, many thanks!!
Tom

[Kaustubh Dwivedi]

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

const printAddress = async () => {
const a = await address;
return a;
};

*Console.log(a) inside printAddress is working fine but :
Now I need to call this printAddress inside the return of a react Component thats why I am returning 'a' from printAdress, there it is showing promise pending. Is there any way to solve this ? *

[Katsiaryna (Kate) Lupachova]

could you provide a piece of code of your react component? it would be easier to understand and will try to help.

[Stefan Wolfrum]

Great article, helped me a lot to understand this concept! 👍👍
One question: suppose this fetch() call is inside a function. How would I return the JSON object from that function back to the main JS area where I made the call to the function? I tried a "return a;" just after the "console.log(a);" but that didn't work. Then I tried "return printAddress();", which didn't work either.
Any help? 😳

[Katsiaryna (Kate) Lupachova]

I'd say that the only way to get this JSON object outside the fetch() call is to assign it to a variable. If you could provide your piece a code it would be easier to understand and to help:)

[Johnny Rubi]

Hello friend, I'm a Brazilian guy who spent 10 hours trying to understand why I couldn't get the result from my API, I spent hours trying to find an answer on the internet on all possible pages and I didn't understand or found any answer, I ended up on your blog and wanted to thank you , I signed up on this site just to comment that your job saved me in every way possible, as I needed it to get a job! please don't stop your blog! you are awesome! and teaches very well! thanks!

[Katsiaryna (Kate) Lupachova]

Hi Johnny! Thank you for such nice words! It means a lot to me!
The main reason why I write blog posts is to share my knowledge with fellow developers so we could help each other.

[gloriaconcepto]

First of all i guess you are feeling ok,secondly i send my positive thoughts of love peace to your country.Lastly thanks i was in a hell trap .but your articles has really help to sort it out one Love .

[Katsiaryna (Kate) Lupachova]

Thank you very much! Appreciate your words!