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

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

Really COOL and helpful stuff!
It saves me from Promise hell.
I spent hours on Stack Overflow and Google and fixed my need with this great article.

Although I can only learn about Belarus through news and Lev Vygotsky, I hope your country makes it.
Thank you again.
Best wishes from Taiwan.

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.

how comes you are invoking the "address" function without any parenthesis.

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

total noob question here i guess, but would appreciate if someone can direct me to the right resource to learn this further , tia

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 .

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

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

let d = printAddress();
console.log(d); <-------- how do I do this? this still returns a Promise { }
I want to access return value from printAddress()

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.

Well, that is not exactly a solution as far as I can understand the problem (or confusion if you will) that was supposed to be solved by this article.

In the first part, you are showing an assignment to a var "address" and then you are trying to log it, which returns a promise as was expected, right?

Then you are proposing to add another function and call "address" from the inside, but you DO NOT log "printAddress", you invoke it. You got logged data, but the same result could have been achieved by just logging the response in "address".

As for "printAddress", by making in async function you have converted it to a promise, so by trying to log it, you will get the same result as logging "address".

Correct me if I'm mistaken, but it seems to me your solution doesn't solve anything but only making the code bigger. The response date was logged from inside the promise and hasn't been extracted in any way.

The problem that you have tried to solve is definitely bothering a number of junior devs (me also as one of those juniors), however, I see no solution here. Moreover, I am, frankly, displeased to see unchecked, untrustworthy content here, no offense.

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!

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 ? *

You could even simplify without using an other function:

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

to

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

Thank you so much! You have no idea how helpful this simple guide was for me. I really mean it. Thank you for taking the time to write this.

This brought light to an issue I had after being hours looking over the internet, I am just curios that on my implementation (using Vue.js), the first solution works only when arrow functions are used, if I try to convert the arrow function to a regular function, the promise value is never returned.

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? 😳

Thank you for your nice words!
Glad to know that my blog post helped you with your project!