web-dev-qa-db-fra.com

Promise est de retour [objet Promise]

J'essaie de faire une vérification de base pour voir si une image est une rétine et a un rapport de portrait. Toutes les fonctionnalités de vérification fonctionnent parfaitement. Mon problème est que dans la fonction finale qui est censée renvoyer le booléen que je reçois de mes chèques, elle renvoie [object Promise]. Je ne sais pas pourquoi cela ne retourne pas mon booléen lorsque je résous la promesse.

Lorsque j'exécute .then(res => console.log(res)), ma réponse booléenne est générée, mais la fonction getImageMeta() qui renvoie la promesse ne fait que renvoyer ce [object Promise], ce qui me fait penser que la promesse n'est pas en train d'être résolue.

Si je pouvais obtenir de l'aide, ce serait génial! 

/************************************
   Check if image is retina portrait
************************************/
const checkIfPortrait = src => !isRetina(src) ? false : getImageMeta(src).then(res => res);
 const isRetina        = src => src.indexOf('@2x') !== -1;
 const isPortrait      = ({ naturalWidth, naturalHeight }) => naturalHeight > naturalWidth ? true : false;

 function getImageMeta (src) {
    const img = new Image();
    img.src = src;

    return new Promise((resolve, reject) => {
      return img.addEventListener("load", function () {
         return resolve(isPortrait(this));
      }, false);
    });
  }


 export { checkIfPortrait }

Voici comment j'appelle la fonction:

<img src={media[i].image} alt={media[i].alt} data-portrait={checkIfPortrait(media[i].image)} />
javascriptpromise
2
Brady Edgar

C'est le résultat attendu. Lorsque vous renvoyez un objet new Promise, ce sera toujours un objet de promesse ([object Promise]).

Vous accédez au résultat d'une promesse en utilisant la méthode .then (ou en utilisant await dans une fonction async). Votre rappel .then est alors appelé lorsque/si le résultat est rendu disponible, ce qui se produira après l'appel de resolve, ou si la promesse a déjà été résolue avant, elle sera appelée assez rapidement.

10
Alexander O'Mara

L'idée de base d'une promesse est qu'elle vous donne quelque chose à revenir immédiatement, même si cela ne se résout que plus tard. Il représente sa valeur éventuelle. Donc, getImageMeta () renvoie immédiatement la promesse, même si elle n’a pas été résolue. 

Une fois que la promesse a été retournée par getImageMeta (), vous pouvez utiliser sa then() pour attendre le booléen final, qui arrivera au plus tôt au prochain cycle de boucle d'événement. 

Avec votre code actuel, vous sauvegardez la promesse retournée par getImageMeta() dans checkIfPortrait. Alors maintenant, checkIfPortrait tient cette promesse et vous pouvez appeler then() dessus. Comme vous exportez checkIfPortrait, vous devrez probablement appeler ensuite le module qui l’importe:

 // import checkIfPortrait
checkIfPortrait(src)
.then(ret_val => {
   //you can access boolean here in ret_val
})
1
Mark Meyer

Le problème est maintenant résolu, merci à tous pour l'aide. Comme indiqué, le problème était que j'appelais la valeur de la promesse avant qu'elle ne puisse être résolue et je n'avais aucun moyen de la mettre à jour une fois qu'elle avait été résolue. 

Donc, ce que j'ai fait est de m'assurer que les données de l'image étaient accessibles avant d'exécuter la fonction. Ensuite, une fois que j'ai eu une promesse résolue, il met ensuite à jour les données d'image pour montrer si c'est portrait ou non.

Donc, le code final ressemble à ceci:

const enhance = lifecycle({
   componentWillMount: function () {
     Object.keys(this.props.media).map((i) =>
       checkIfPortrait(this.props.media[i].image)
         ? this.props.media[i].isPortrait = true
         : this.props.media[i].isPortrait = false
       );
   }
 })

const checkIfPortrait = src => !isRetina(src) ? false : getImageMeta(src).then(res => res);
 const isRetina        = src => src.indexOf('@2x') !== -1;
 const isPortrait      = ({ naturalWidth, naturalHeight }) => naturalHeight > naturalWidth ? true : false;

 function getImageMeta (src) {
   const img = new Image();
   img.src = src;

   return new Promise((resolve, reject) => {
     return img.addEventListener("load", function () {
       return resolve(isPortrait(this));
     }, false);
   });
 }


 export { checkIfPortrait }

<img src={media[i].image} alt={media[i].alt} data-portrait={media[i].isPortrait} />
0
Brady Edgar