Is there a way to save [[Promise Result]] as a variable?

Question

I am trying to access [[Promise Results]] and save it as a variable. The end goal I just want the result from the .then statement and use it in other function. If there is another better way to do it please let me, I'm new to JavaScript, so it would be awesome if you could explain it to me than just dump code. Thanks is advance Here is the fetch request

function currentloginid() {
    return fetch('http://localhost/gaq/api/api.php?action=userid', {
       method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        var userid = JSON.parse(data);
        console.log(userid);
        return userid;
    })
}

The code below is when I console log the function in another function

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: 1

`let variable = currentloginid();` ... now variable is the promise — Jaromanda X, Oct 02 '20 at 01:03
@JaromandaX Ok cool, I want to save the [[]PromiseResult]] value. Not the whole promise — Tu-Ai Le, Oct 02 '20 at 01:09
`let variable = await currentloginid()` in an `async` function — Jaromanda X, Oct 02 '20 at 01:10
@JaromandaX I'm receiving and error await is only valid in async function, do add async to the function calling it or to currentloginid? — Tu-Ai Le, Oct 02 '20 at 01:18
`response.json()` promise resolves with parsed object. No need for JSON.parse() — charlietfl, Oct 02 '20 at 01:53

score 14 · Accepted Answer · answered Oct 02 '20 at 01:27

There are 3 ways for solving this:

Since you return a promise, use .then to get the returned value.

function currentloginid() {
  return fetch('http://localhost/gaq/api/api.php?action=userid', {
      method: 'GET',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      var userid = JSON.parse(data);
      console.log(userid);
      return userid;
    })
}

currentloginid().then(value => console.log(value));

In one of the .then you already have, set an outside variable to the value. However this solution is not good since you could encounter situation where myValue is not set.

let myValue;

function currentloginid() {
  return fetch('http://localhost/gaq/api/api.php?action=userid', {
      method: 'GET',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      var userid = JSON.parse(data);
      console.log(userid);
      myValue = userid
      return userid;
    })
}

currentloginid();
console.log(myValue);

Use the syntactic sugar async await to "await" for the value to return. I think that this approach is much more readable and easy to use (behind the scenes it's the same as option 1).

function currentloginid() {
  return fetch('http://localhost/gaq/api/api.php?action=userid', {
      method: 'GET',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      var userid = JSON.parse(data);
      console.log(userid);
      return userid;
    })
}

console.log(await currentloginid());

Thank you!, you provided me with options of how to solve this problem which is great, and gave a brief explanation on how each of them worked, it help a lot thank you :) — Tu-Ai Le, Oct 02 '20 at 01:31
This explanation is great! I now grasp the concept of fetch way better! — T. de Jong, Mar 25 '22 at 09:44

score 3 · Answer 2 · answered Oct 02 '20 at 01:21

Instead of promise chains you could use async/await and return the data(userid) directly.

const currentloginid = async () => {
  const response = await fetch('http://localhost/gaq/api/api.php?action=userid')

  const data = await response.json()
  
  //console.log(JSON.parse(data))

  return JSON.parse(data)
}

score 0 · Answer 3 · answered Oct 02 '20 at 01:39

0

You can call then() on the same promise as many times as you want.

Storing the promise returned by the function in a variable allows you to use then() on that variable whenever you need to

function currentloginid() {
  return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
}

const storedPromise = currentloginid();
console.log('No delay')
storedPromise.then(({name, id})=> console.log({name, id}))

setTimeout(()=>{
  console.log('After delay, same promise')
  storedPromise.then(({name, id})=> console.log({name, id}))
}, 2000)

answered Oct 02 '20 at 01:39

charlietfl

170,828
13
121
150

You may need to use the "useState" and update the state in the chain. – EILYA Oct 06 '21 at 08:20
@aminamin There is no React involved here – charlietfl Oct 06 '21 at 17:20

Is there a way to save [[Promise Result]] as a variable?

3 Answers3

Linked

Related