Question

我正在尝试进行基本检查以查看图像是否为视网膜并具有纵向比例。我所有检查功能都完美无缺。我的问题是，在最终函数中应该返回我从检查得到的布尔值，它返回[object Promise]。我不知道为什么在我解决诺言时这不会返回我的布尔值。

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

Answer 1

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

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

Answer 2

承诺的基本理念是，它会立即为您提供回报，即使它直到稍后才能解决。它代表了它的最终价值。因此getImageMeta ()会立即返回承诺，即使它尚未解决。

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

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

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

Answer 3

试试这个，

function axiosTest() {
    axios.get(url)
        .then(response => response.data)
        .catch(error => error);
}

async function getResponse () {
        const response = await axiosTest();
        console.log(response);
}

getResponse()

它可以工作，但您想要获取响应的每个函数都需要是异步函数或使用额外的 .then() 回调。

function axiosTest() {
    axios.get(url)
        .then(response => response.data)
        .catch(error => error);
}

async function getResponse () {
        axiosTest().then(response => {
                console.log(response)
        });
}

getResponse()

如果有人知道避免这种情况的方法，请告诉。

还可以查看 Katsiaryna (Kate) Lupachova 的 article on Dev.to。我认为这会有所帮助。

Answer 4

此问题现已解决，感谢大家的帮助。如上所述，问题是我在解决之前调用了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} />

Answer 5

您的函数返回promise，因此您应将其称为promise

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

Answer 6

Promise返回[object Promise]，然后返回空值。检查mongo DB的集合并确保访问路径正确。

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

6 个答案: