Pourquoi ma fonction asynchrone renvoie-t-elle Promise { <pending> } au lieu d'une valeur ?

Question

Mon code :

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

Et quand j'essaie d'exécuter quelque chose comme ça :

let userToken = AuthUser(data)
console.log(userToken)

J'y vais :

Promise { <pending> }

Mais pourquoi ?

Mon objectif principal est d'obtenir un jeton de google.login(data.username, data.password) qui renvoie une promesse, dans une variable. Et seulement ensuite, effectuer certaines actions.

Answer 1

Votre Promesse est en attente, complétez-la en

userToken.then(function(result){
console.log(result)
})

après votre code restant. Tout ce que fait ce code est que .then() complète votre promesse et capte le résultat final en résultat variable et imprimer le résultat dans la console. Gardez à l'esprit que vous ne pouvez pas stocker le résultat dans une variable globale. J'espère que cette explication pourra vous aider.

Answer 2

J'ai eu le même problème plus tôt, mais ma situation était un peu différente dans le front-end. Je vais quand même partager mon scénario, peut-être que quelqu'un pourrait le trouver utile.

J'avais un appel api à /api/user/register dans le frontend avec l'email, le mot de passe et le nom d'utilisateur comme corps de la requête. Lors de la soumission du formulaire (formulaire d'enregistrement), une fonction de gestion est appelée qui lance l'appel de récupération à /api/user/register . J'ai utilisé le event.preventDefault() dans la première ligne de cette fonction de gestion, toutes les autres lignes, comme la formation du corps de la requête ainsi que l'appel à la récupération, ont été écrites après l'option event.preventDefault() . Cela a donné un pending promise .

Mais lorsque je place le code de formation du corps de la demande au-dessus de la balise event.preventDefault() il a rendu la vraie promesse. Comme ça :

event.preventDefault();
    const data = {
        'email': email,
        'password': password
    }
    fetch(...)
     ...

au lieu de :

     const data = {
            'email': email,
            'password': password
        }
     event.preventDefault();
     fetch(...)
     ...

Answer 3

Essayez ceci

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");
startAsync.addEventListener("click", function() {
    if (number1.value > 0 && number2.value > 0) {
        asyncTest(parseInt(number1.value), parseInt(number2.value)).then(function(result) {
            document.getElementById("promiseResolved").textContent = "promiseResolved: " + result
        });
    } else {
        asyncTest(1, 2).then(function(result) {
            document.getElementById("promiseResolved").textContent = "promiseResolved: " + result
        });
    }

});

async function asyncTest(a, b) {
    return await (a + b);
};

  <button id="startAsync">start Async function</button><br />
  <input type="number" id="number1" /><br />
  <input type="number" id="number2" /><br />
  <span id="promiseResolved"></span><br />