JavaScript returning a promise even though it prints a string to the console

Question

I'm trying to make a function that returns a string containing a jwt token, the function used in Amplify returns a promise and I can't get my head around promises but after some struggling, I've managed to get my function to get the string I need from the promise and print it to the console but when I then return this string from the function so I can call it from various places the resulting data is now a promise again. No idea what I'm doing wrong.

async function getToken() {
  let userData = await Auth.currentAuthenticatedUser().then(result => result.signInUserSession).then(result => result.accessToken).then(result => result.jwtToken);
  console.log(userData); // this prints the token perfectly as text to the console
  return(userData); // I want this to return the token as a string not a promise
}

console.log(getToken(); // this prints a promise to the console again even though I've got it to a string in the function.

when functions are defined as async, they always return a promise — AngelSalazar, May 15 '20 at 22:05
so at what point can I break out of the promise to return just my string? — Matt M, May 15 '20 at 22:09
Yeah async functions are just promises :). I know its confusing at first — tfarmer4, May 15 '20 at 22:23

tfarmer4 · Answer 1 · 2020-05-15T22:41:09.997

-1

EDIT: Sandbox here All you need is this edit I believe. Remember that async functions are just promises. You have to do any work on the result by either setting the result to a variable with an let data = await Auth.currentAuthenticatedUser().then(result => result).then(data => data.jwtToken), or just do all the necessary work in the .then(data => {data.jwtToken //...your work here}).

edited May 15 '20 at 22:41

answered May 15 '20 at 22:11

tfarmer4

115
12

that is still giving me a promise, its so confusing. – Matt M May 15 '20 at 22:12
@MattM see my sandbox – tfarmer4 May 15 '20 at 22:22

Arish Khan · Answer 2 · 2020-05-15T22:20:57.390

-1

If you have used await inside a function than it will only return a Promise no matter what so you can just use

getToken().then(console.log)

// or

getToken().then(token => console.log(token))

// both are same

since you can not use await outside an async function as a matter of react application just use state such as update the state of application using setState() in the .then of the promise returned. there is no such need of making the function async.

or if you really want the component to be async than just study <Suspense> in react to handle the components that have to fetch data from a network before being displayed

use it like this.

let result = null
getToken().then(token => {
    result = token

    // Now you can use the result variable
    console.log(result)
})

edited May 15 '20 at 22:20

answered May 15 '20 at 22:12

Arish Khan

720
1
6
16

That writes it perfectly to the console but how do I get that string as a variable? I'm thinking something like getToken().then(result => { return result }); but that returned a promise again – Matt M May 15 '20 at 22:16
I have updated answer – Arish Khan May 15 '20 at 22:19

score -1 · Accepted Answer · answered May 15 '20 at 22:39

Think I've sussed it now thanks to @tfarmer4 and @Arish Khan. In my head I wanted to get the token as a string variable so I could pass it into my API call functions but I realise now I will need to call it from within each function so below is my example solution.

function getToken() {
  return Auth.currentAuthenticatedUser().then(result => result.signInUserSession).then(result => result.accessToken).then(result => result.jwtToken);
}

function callAPI () {
  getToken().then(data => {
    let token = data;
    console.log(token);
    //more lines here such as calling my API using token as the variable of the jwt token
    }
  );
};

glad I could help. I struggled with this for a while when trying to understand promises as well. Just have to memorize the patterns associated with each approach because you'll see all the different syntax mixed in one development project a lot of times. — tfarmer4, May 15 '20 at 22:47

JavaScript returning a promise even though it prints a string to the console

3 Answers3