javascript - Promise 正在返回 [object Promise]

Question

我正在尝试进行基本检查以查看图像是否为视网膜图像并且具有纵向比例。我的所有检查功能都运行良好。我的问题是，在应该返回我从检查中获得的 bool 值的最终函数中，它正在返回 [object Promise]。我不知道为什么当我解决 promise 时这不返回我的 bool 值。

当我运行 .then(res => console.log(res)) 它输出我的 bool 响应，但是返回 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"}
})();