Assign return value of promise to an external variable in react

Question

I hope your are healthy and well. I am developing a simple mobile application using ionic and react. I am using sql database and for this purpose I created Api's for user registration and login. Whenever a user login, app stores user session using local Storage. [Code for storing session]

Storage.set({
  key: 'currentUser',
  value: username
});

No the problem is this: [Code for retrieving stored values]

let session;
Storage.get({ key: 'currentUser' })
.then(p1 => {
  const p2 = p1.value;
  const p3 = p2.replace(/"/g, "");
  session = p3;

});

console.log(session) //This gives 'undefined'

Here variable (p3) contains actual username. But when I assign its value to session variable. The session variable becomes undefined. I don't know how to get session value out of this function. Please help me to fix this. Thanks

score 1 · Accepted Answer · answered Mar 26 '20 at 21:06

1

I think you can't. The code wrapped in then() is executed asynchronously, meaning you don't know what is executed first: session = p3 or console.log(session). Maybe this queestion will help? How to access the value of a promise?

answered Mar 26 '20 at 21:06

mkasp98

164
1
6

So what should be the best approach to store and retrieve sessions in ionic ? – Awais Khalid Mar 27 '20 at 13:19
Are you using react? – mkasp98 Mar 27 '20 at 13:25
Yes I am using react with ionic (6.1) – Awais Khalid Mar 27 '20 at 13:56
You need to manage state for your app somehow. Maybe put this code in a react component and use useState hook to store state? https://reactjs.org/docs/hooks-state.html – mkasp98 Mar 27 '20 at 14:01

score 0 · Answer 2 · answered Mar 26 '20 at 21:06

0

Javascript is an asynchronous language. Here your request will take some time before arriving and that's why javacript is going to ignore the function then(). You can see this process using the setTimeout function that emulate your API call:

let session;

setTimeout(() => {
  // This will be executed after 500ms but javascript go ahead and execute the other console log
  session = 'test';
  console.log(session);
}, 500);

console.log(session) // Is executed first

answered Mar 26 '20 at 21:06

johannchopin

13,720
10
55
101

Thanks for your answer. Is there any other way of storing and retrieving sessions in ionic? – Awais Khalid Mar 27 '20 at 13:20
@AwaisKhalid Not a problem ;) if it was useful can you please `upvote` my answer ? – johannchopin Mar 27 '20 at 13:21

Assign return value of promise to an external variable in react

2 Answers2