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

La promesse sera toujours vous connecter en attendant, tant que ses résultats ne sont pas encore résolue. Indépendamment de la promesse de l'état (résolus ou encore dans l'attente de), vous devez appeler .then sur la promesse de capturer les résultats:

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) //will log results.
})

pourquoi est-ce?

Les promesses sont vers l'avant seulement, vous ne pouvez les résoudre une fois, et vous ne pouvez obtenir à leur valeur de transmettre à leurs .then ou .catch méthodes

Détails

Selon les Promesses/A+ caractéristiques:

La promesse de la procédure de résolution est un résumé de l'opération en prenant comme entrée d'une promesse et d'une valeur, que nous noterons [[Résoudre]](promesse, x). Si x est un thenable, il tente de rendre la promesse d'adopter l'état de x, sous l'hypothèse que x se comporte un peu comme un promesse. Sinon, il remplit la promesse avec la valeur x.

Ce traitement de thenables permet promesse des implémentations interagir, tant qu'ils exposent une des Promesses/A+-compatible alors la méthode. Il permet aussi de Promesses/A+ implémentations "assimiler" nonconformant implémentations raisonnablement puis des méthodes.

Cette spécification est un peu difficile à analyser, donc permet de le décomposer:

La règle est que, si la fonction dans l' .then gestionnaire retourne une valeur, l' Promise résout à cette valeur. Si la fonction renvoie un Promise, l'autre, alors la clause sera l' .then de l'état résolu de le retourné Promise. La façon dont il fonctionne réellement est décrite en détail ci-dessous:

1. Le retour de l' .then fonction sera la détermination de la valeur de la promesse.

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. Si l' .then fonction renvoie une promesse, puis la volonté de ses promesse sera la volonté de ses prochaines .then de coeur.

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"
});

Answer 2

Je sais que cette question a été posée il y a 2 ans, mais je rencontre le même problème et la réponse au problème est depuis ES2017, que vous pouvez simplement await la valeur de retour de la fonction (pour l'instant, cela ne fonctionne qu'en async fonctions), comme :

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

let userToken = await AuthUser(data)
console.log(userToken) // your data

Answer 3

Le site then renvoie une promesse en attente qui peut être résolue de manière asynchrone par la valeur de retour d'un gestionnaire de résultats enregistré dans l'appel à la méthode then ou rejeté en lançant une erreur dans le gestionnaire appelé.

Donc, appeler AuthUser ne va pas soudainement connecter l'utilisateur de manière synchrone, mais renvoie une promesse dont les gestionnaires alors enregistrés seront appelés après la réussite ( ou l'échec) de la connexion. Je suggérerais de déclencher tout le traitement de la connexion par une promesse then de la promesse de connexion. Par exemple, en utilisant des fonctions nommées pour mettre en évidence la séquence du flux :

let AuthUser = data => {   // 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);
}

Answer 4

Si cette situation se produit pour une valeur multiple comme un tableau.

[ 
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]

Vous pouvez utiliser Promise.all() cela résoudra toutes les promesses.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 5

Voir la section MDN sur Des promesses. En particulier, regardez le type de retour de then().

Pour se connecter, l'agent utilisateur doit soumettre une demande au serveur et attendre de recevoir une réponse. Étant donné que l'arrêt total de l'exécution de votre application pendant l'aller-retour d'une requête constitue généralement une mauvaise expérience pour l'utilisateur, pratiquement toutes les fonctions JS qui vous connectent (ou qui effectuent toute autre forme d'interaction avec le serveur) utilisent une Promise, ou quelque chose de très similaire, pour fournir des résultats de manière asynchrone.

Maintenant, remarquez aussi que return sont toujours évaluées dans le contexte de la fonction dans laquelle elles apparaissent. Ainsi, lorsque vous avez écrit :

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

la déclaration return token; signifie que la fonction anonyme qui est passée dans then() devrait retourner le jeton, et non pas que le AuthUser fonction devrait. Ce que AuthUser retourne le résultat de l'appel google.login(username, password).then(callback); qui se trouve être une promesse.

En fin de compte, votre rappel token => { return token; } ne fait rien ; au contraire, votre entrée dans then() doit être une fonction qui gère le jeton d'une manière ou d'une autre.