Promise正在返回[对象Promise]

Question

我正在试着做一个基本的检查，看看图像是不是视网膜，是否有肖像比例。我让所有的检查功能都工作得很好。我的问题是，在最后一个应该返回我从检查中得到的布尔值的函数中，它返回的是[object Promise]。我不知道为什么当我解析promise时，它没有返回我的布尔值。

当我运行.then(res => console.log(res))时，它输出我的布尔响应，但是返回promise的函数getImageMeta()只返回该[object Promise]，这让我认为promise实际上并没有被解析。

如果我能得到一些帮助，那就太好了！

/************************************
   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 }

这就是我调用函数的方式：

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

Answer 1

这是预期的结果。当你返回一个new Promise对象时，它总是一个promise对象(字符串化后为[object Promise])。

可以通过使用.then方法(或在async函数中使用await )访问promise的结果。当/如果结果可用时，您的.then回调将被调用，这将在您调用resolve之后发生，或者如果之前已经解析了promise，那么它将被调用得相当快。

​

function getImageMeta(src) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({metadata: `for: ${src}`});
        }, 100);
    });
}

getImageMeta('test.png').then(meta => {
    console.log(meta); // {"metadata": "for: test.png"}
});

(async () => {
    const meta = await getImageMeta('test.png');
    console.log(meta); // {"metadata": "for: test.png"}
})();

​

Answer 2

承诺的基本思想是，它会让你立即返回一些东西，即使它要等到以后才能解决。它代表了它的最终价值。因此，即使还没有解决，getImageMeta ()也会立即返回承诺。

一旦您有了getImageMeta ()返回的promise，您就可以使用它的then()等待最终的布尔值，该布尔值最早会出现在下一个事件循环周期中。

使用当前代码，您可以将getImageMeta()返回的promise保存到checkIfPortrait。所以现在checkIfPortrait有了这个承诺，你可以对它调用then()。由于您要导出checkIfPortrait，因此最终可能会调用导入它的模块：

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

Answer 3

现在问题已经解决了，感谢大家的帮助。如上所述，问题是我在promise被解决之前调用了它的值，并且在它被解决之后无法更新它的值。

因此，我所做的是确保在运行函数之前图像数据是可访问的。然后，一旦我有了一个解决的承诺，然后更新图像数据，以显示它是否是肖像。

因此，最终的代码如下所示：

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} />