承诺正在返回[对象承诺]

问题描述：

我想做一个基本的检查，看看图像是视网膜，并有肖像比例。我有所有检查功能工作得很好。我的问题是，在最终的函数，应该返回我从我的支票得到的布尔值，它返回[object Promise]。我不知道为什么当我解决诺言时，这并没有返回我的布尔值。承诺正在返回[对象承诺]

当我运行.then(res => console.log(res))它输出我的布尔响应，但函数getImageMeta()返回承诺只是返回[object 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)} />

看一看[MDN - 使用承诺（https://developer.mozilla.org/ en-US/docs/Web/JavaScript/Guide/Using_promises）了解有关承诺的更多信息。 '。那么（res => res）'是多余的，你不需要它。 *“我的问题是，在应该返回布尔值的最终函数中”*这是不可能的。您不能将异步进程转换为同步进程。 –

答

这是预期的结果。当您返回一个new Promise对象时，它始终是承诺对象（[object Promise]）。

您可以通过使用.then方法（或在async函数中使用await）来访问承诺的结果。您的.then回调将在/如果结果可用时调用，这将在您致电resolve后发生，或者如果承诺已经解决，然后它将被调用，而且会很快被调用。

答

承诺的基本思想是它可以让你马上返回一些东西，即使它晚些时候才会解决。它代表了它的最终价值。所以getImageMeta()立即返回承诺，即使它还没有解决。

一旦你得到了getImageMeta()返回的承诺，你可以使用它的then()来等待最后的布尔值，这个布尔值最早会出现在下一个事件循环周期中。

使用您当前的代码，您可以将由getImageMeta()返回的承诺保存到checkIfPortrait。所以现在checkIfPortrait持有这个承诺，你可以打电话then()就可以了。既然要导出checkIfPortrait你最终可能会认为它导入模块上调用，则：

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

对不起@BradyEdgar - 我看到现在发生了什么。我没有意识到你保存的结果checkIfPortrait和出口。 checkIfPortrait带有对承诺的引用。你会在'checkIfPortrait'上调用'then（）'。但承诺的方式工作，你不能直接访问价值，因为这将是太快。你需要在'then（）'回调中处理它。 –

答

现在的问题是解决了，感谢大家的帮助。就像所说的那样，问题在于我在承诺的价值能够得到解决之前称之为承诺的价值，并且在解决问题后无法更新该价值。

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

所以最终的代码如下所示：

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

承诺正在返回[对象承诺]

相关推荐