☰

Promise は [object Promise] を返します 質問する

tag-icon • tag-icon javascript promise
Promise は [object Promise] を返します 質問する

画像が Retina で縦長の比率であるかどうかを確認するための基本的なチェックを実行しようとしています。すべてのチェック機能は完全に正常に動作しています。問題は、チェックから取得したブール値を返すはずの最終関数で、 が返されることです[object Promise]。Promise を解決したときにブール値が返されないのはなぜかわかりません。

実行するとブール値の応答が出力されますが、 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)} />

ベストアンサー1

これは期待される結果です。new Promiseオブジェクトを返す場合、それは常に promise オブジェクトになります ([object Promise]文字列化されている場合)。

.thenメソッド (または関数await内async)を使用して、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"}
})();

おすすめ記事