プロミスが戻ってきている[オブジェクト約束]

Question

イメージが網膜でポートレート比であるかどうかを確認するために基本的なチェックをしています。私はすべての機能を完全に正常に動作しているチェックしている。私の問題は、最後の関数でブール値を返すことになっていることです。私のチェックでは返されるのは[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)} /> 

Answer 1

これは、予想される結果です。 new Promiseオブジェクトを返すと、それは常に約束オブジェクト（[object Promise]）になります。

.thenメソッドを使用して（または関数内でawaitを使用して）約束の結果にアクセスします。あなたの.thenコールバックは、結果が利用可能になった場合に呼び出されます。resolveを呼び出した後、または約束が既に解決されてからすぐに呼び出される場合にコールバックが呼び出されます。

Answer 2

約束の基本的な考え方は、それはあなたにそれが後になるまで解決されません場合でも、すぐに返すために何かを与えることです。最終的な価値を表します。だからgetImageMeta()は解決していないのにすぐに約束を返す。

getImageMeta()によって約束が返されると、then()を使用して最終ブール値を待つことができます。このブール値は、次のイベントループサイクルで最も早く来ます。あなたはcheckIfPortraitへgetImageMeta()によって返された約束を保存しているあなたの現在のコードで

。だから今checkIfPortraitこの約束を保持し、then()に電話することができます。あなたがcheckIfPortraitを輸出しているので、あなたはおそらくそれをインポートモジュールで、その後呼び出すことになります：

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

Answer 3

問題は今、助けてくれてありがとうみんなで解決されます。私が約束した価値を、それが解決され、それが解決された後にその価値を更新する方法を持っていないうちに呼び出す前に、

だから何私がやったことは、画像データは、機能を実行する前に、アクセス可能だったことを確認しています。その後、私は約束が得られたら、画像データを更新して、それが肖像画であるかどうかを示します。

だから、最終的なコードは次のようになります。

​​

---

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