Why is my asynchronous function returning Promise pending instead of a value

Question

My code   let AuthUser   data   gt      return google login data username  data password  then token   gt    return token         And when i try to run something like this   let userToken   AuthUser data  console log userToken    I m getting   Promise    lt pending gt      But why   My main goal is to get token from google login data username  data password  which returns a promise  into a variable  And only then preform some actions

User · Accepted Answer

The promise will always log pending as long as its results are not resolved yet. You must call .then on the promise to capture the results regardless of the promise state (resolved or still pending):

let AuthUser = function(data) {
  return google.login(data.username, data.password).then(token => { return token } )
}

let userToken = AuthUser(data)
console.log(userToken) // Promise { <pending> }

userToken.then(function(result) {
   console.log(result) // "Some User token"
})

Why is that?

Promises are forward direction only; You can only resolve them once. The resolved value of a Promise is passed to its .then or .catch methods.

Details

According to the Promises/A+ spec:

The promise resolution procedure is an abstract operation taking as input a promise and a value, which we denote as [[Resolve]](promise, x). If x is a thenable, it attempts to make promise adopt the state of x, under the assumption that x behaves at least somewhat like a promise. Otherwise, it fulfills promise with the value x.

This treatment of thenables allows promise implementations to interoperate, as long as they expose a Promises/A+-compliant then method. It also allows Promises/A+ implementations to “assimilate” nonconformant implementations with reasonable then methods.

This spec is a little hard to parse, so let's break it down. The rule is:

If the function in the .then handler returns a value, then the Promise resolves with that value. If the handler returns another Promise, then the original Promise resolves with the resolved value of the chained Promise. The next .then handler will always contain the resolved value of the chained promise returned in the preceding .then.

The way it actually works is described below in more detail:

1. The return of the .then function will be the resolved value of the promise.

function initPromise() {
  return new Promise(function(res, rej) {
    res("initResolve");
  })
}

initPromise()
  .then(function(result) {
    console.log(result); // "initResolve"
    return "normalReturn";
  })
  .then(function(result) {
    console.log(result); // "normalReturn"
  });

2. If the .then function returns a Promise, then the resolved value of that chained promise is passed to the following .then.

function initPromise() {
  return new Promise(function(res, rej) {
    res("initResolve");
  })
}

initPromise()
  .then(function(result) {
    console.log(result); // "initResolve"
    return new Promise(function(resolve, reject) {
       setTimeout(function() {
          resolve("secondPromise");
       }, 1000)
    })
  })
  .then(function(result) {
    console.log(result); // "secondPromise"
  });

User · Answer

Your Promise is pending  complete it by  userToken then function result   console log result       after your remaining code  All this code does is that  then   completes your promise  amp  captures the end result in result variable  amp  print result in console  Keep in mind  you cannot store the result in global variable  Hope that explanation might help you

User · Answer

The then method returns a pending promise which can be resolved asynchronously by the return value of a result handler registered in the call to then  or rejected by throwing an error inside the handler called   So calling AuthUser will not suddenly log the user in synchronously  but returns a promise whose then registered handlers will be called after the login succeeds   or fails   I would suggest triggering all login processing by a then clause of the login promise  E G  using named functions to highlight the sequence of flow   let AuthUser   data   gt         just the login promise   return google login data username  data password       AuthUser data  then  processLogin  catch loginFail    function processLogin  token             do logged in stuff           enable  initiate  or do things after login   function loginFail  err          console log  login failed      err

User · Answer

See the MDN section on Promises  In particular  look at the return type of then     To log in  the user-agent has to submit a request to the server and wait to receive a response  Since making your application totally stop execution during a request round-trip usually makes for a bad user experience  practically every JS function that logs you in  or performs any other form of server interaction  will use a Promise  or something very much like it  to deliver results asynchronously   Now  also notice that return statements are always evaluated in the context of the function they appear in  So when you wrote   let AuthUser   data   gt      return google      login data username  data password       then  token   gt          return token               the statement return token  meant that the anonymous function being passed into then   should return the token  not that the AuthUser function should  What AuthUser returns is the result of calling google login username  password  then callback    which happens to be a Promise   Ultimately your callback token   gt    return token    does nothing  instead  your input to then   needs to be a function that actually handles the token in some way

User · Answer

I had the same issue earlier  but my situation was a bit different in the front-end  I ll share my scenario anyway  maybe someone might find it useful  I had an api call to  api user register in the frontend with email  password and username as request body  On submitting the form register form   a handler function is called which initiates the fetch call to  api user register  I used the event preventDefault   in the beginning line of this handler function  all other lines like forming the request body as well the fetch call was written after the event preventDefault    This returned a pending promise  But when I put the request body formation code above the event preventDefault     it returned the real promise  Like this  event preventDefault        const data              email   email           password   password           fetch                instead of        const data                  email   email               password   password                event preventDefault         fetch

User · Answer

I know this question was asked 2 years ago  but I run into the same issue and the answer for the problem is since ES2017  that you can simply await the functions return value  as of now  only works in async functions   like  let AuthUser   function data      return google login data username  data password  then token   gt    return token        let userToken   await AuthUser data  console log userToken     your data

[javascript] Why is my asynchronous function returning Promise { <pending> } instead of a value?

Details

Examples related to javascript

Examples related to node.js

Examples related to promise