doesnt print the value even if i initialize variable outside of function

Question

I have a function below and i set username outside the function but I can get the value inside of it but not outside. Why is that? Example shown below. I am trying to print it outside or call it so it returns that value

var username
Auth.loggedInUser().then(function (user){
   username = user.username
   console.log(username) <--- this will print the username   
});
console.log(username) <--- this will print undefined

Also if i try the below it returns a promise in console that isnt just the username

var username = Auth.loggedInUser().then(function (user){
   return user.username
});
console.log(username) <--- this will Promise {$$state: Object}$$state: Object__proto__: Object

How can i go about just getting the raw username when calling it?

`console.log(username)` outside of the async call is running before your async call completes. — Josh Beam, Jul 31 '17 at 23:00
Impossible. Basically you order a pizza and soon as you hang up the phone you expect to eat it. — epascarello, Jul 31 '17 at 23:06
Got it, im not sure the code required to achieve this, im struggling, I get the concept, but maybe im not clear. — john samcock, Jul 31 '17 at 23:50
This is what i have so far; `function getUserName(callback) { Auth.loggedInUser().then(function (user){ callback( user.name) }); }` — john samcock, Aug 01 '17 at 00:24
`var username; getUserName(function(result) { console.log(result) username = result }) console.log(username)` But as you can see result will print the value but username will still be undfined. How can i set this result value to a variable i can use outside of these functions. @JoshBeam — john samcock, Aug 01 '17 at 00:24

choasia · Accepted Answer · 2017-08-01T01:11:19.617

1

It's simply because you are using Promise which is asynchronous. It hadn't been fulfilled (where you set user.username as username) when console.log(username) was called. You can check the example.

var username = 'Rose';
new Promise(resolve => {
  resolve('Jack');
})
.then(name => {
  username = name;
  console.log('A:' + username);
})
.then(() => {
  console.log('B:' + username);
})
console.log('C:' + username);

// result:
// C:Rose
// A:Jack
// B:Jack

UPDATE: I updated an await/sync solution, please check.

(async () => {
  const result = await axios.get('/echo/html/'); // axios.get returns a Promise object
  const status = result.status; // you wait until result is fulfilled
  console.log(status); // in this way, your get what you want.
})();

edited Aug 01 '17 at 01:11

answered Jul 31 '17 at 23:14

choasia

10,404
6
40
61

I am having trouble trying to get the value using my code. I get the idea but i dont know how to code it – john samcock Jul 31 '17 at 23:49
Not sure what your use case is, but generally, callback should do the trick for you. – choasia Aug 01 '17 at 00:10
I went ahead and did that strategy and it worked, but how can i save the result to a variable outside of the callback? It will still show undefined. – john samcock Aug 01 '17 at 00:24
This is what i have so far; `function getUserName(callback) { Auth.loggedInUser().then(function (user){ callback( user.name) }); }` `var username; getUserName(function(result) { console.log(result) username = result }) console.log(username)` But as you can see result will print the value but username will still be undfined. How can i set this result value to a variable i can use outside of these functions. @JoshBeam – john samcock Aug 01 '17 at 00:26
You have to wait until your Promise object fulfilled. If you insist on writing like a synchronous way, await/async should be used which appears to be an overkill in your case, I think. – choasia Aug 01 '17 at 01:06
Btw, await/sync only works since ES2017. – choasia Aug 01 '17 at 01:13

score 0 · Answer 2 · answered Jul 31 '17 at 23:01

This obiously won't work, because you're using a Promise which is running asynchronously. That means at the moment Javascript is running the second line with console.log(username), the Promise isn't resolved yet and it prints undefined.

If you want to use the value of username you have to wait until the Promise resolves, for example invoking a method inside your then-method which takes the username as an arugment and is doing something with it.

doesnt print the value even if i initialize variable outside of function

2 Answers2