Javascript Promise 正在返回 [object Promise]

Promise is returning [object Promise]

提问by Brady Edgar

I am trying to do a basic check to see if an image is retina and has a portrait ratio. I have all that checking functionality working perfectly fine. My issue is that in the final function that is supposed to return the boolean I get from my checks it is returning [object Promise]. I have no idea why this is not returning my boolean when I resolve the promise.

我正在尝试进行基本检查，以查看图像是否为视网膜并具有人像比例。我有所有的检查功能工作得很好。我的问题是，在应该返回我从检查中得到的布尔值的最终函数中，它正在返回[object Promise]. 我不知道为什么当我解决承诺时这没有返回我的布尔值。

When I run .then(res => console.log(res))it outputs my boolean response, but the function getImageMeta()that returns the promise just returns that [object Promise]which makes me think the promise isn't actually being resolved.

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

If I could get some assistance that would be great!

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

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

This is how I am calling the function:

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

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

回答by Alexander O'Mara

This is the expected result. When you return a new Promiseobject, it will always be a promise object ([object Promise]).

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

You access the result of a promise by using the .thenmethod (or using awaitin an asyncfunction). Your .thencallback is then called when/if the result is made available, which will happen after you call resolve, or if the promise was already resolved prior it will be called rather quickly.

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

回答by Mark Meyer

The basic idea of a promise is that it gives you something to return right away even if it won't resolve until later. It represents its eventual value. So getImageMeta ()is immediately returning the promise even though it has not resolved.

Promise 的基本思想是它给你一些东西可以立即返回，即使它要到以后才能解决。它代表了它的最终价值。于是getImageMeta ()立即返回，即使它没有解决的承诺。

Once you have the promise returned by getImageMeta ()you can use its then()to wait for the final boolean, which will come on the next event loop cycle at the earliest.

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

With your current code you are saving the promise returned by getImageMeta()to checkIfPortrait. So now checkIfPortraitholds this promise and you can call then()on it. Since you are exporting checkIfPortraityou will probably end up calling then on the module that imports it:

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

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

回答by Brady Edgar

The issue is now resolved, thanks to everyone for the help. Like stated the issue was I was calling the promise's value before it could be resolved and had no way of updating that value after it had been resolved.

现在问题已经解决，感谢大家的帮助。就像所说的问题是我在解决之前调用了承诺的值，并且在解决之后无法更新该值。

So what I did is made sure the image data was accessible before running the function. Then once I had a resolved promise it then update the image data to show whether it is portrait or not.

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

So the final code looks like this:

所以最终的代码是这样的：

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

回答by mariam edward

your function return promise so you should call it as promise

您的函数返回承诺，因此您应该将其称为承诺

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