このコールバックをasync/awaitを使用して約束する方法を教えてください。

Question

以下の機能がかかり、画像のURLから、ロードし、その幅と高さを返します。

ready() { 
    console.log(getImageData(this.url)) 
} 

私はundefinedを得る：

function getImageData (url) { 
    const img = new Image() 
    img.addEventListener('load', function() { 
    return { width: this.naturalWidth, height: this.naturalHeight } 
    }) 
    img.src = url 
} 

問題は、私はこのような何かを行う場合、ありますこの関数は実行されていますが、画像がまだロードされていないためです。

await/asyncを使用して、写真が読み込まれ、幅と高さがすでに利用可能な場合にのみ値を返す方法を教えてください。

Answer 1

async/awaitこのコールバック関数を約束する方法を教えてください。

あなたはありません。 As usual, you use the new Promise constructor。そのための構文的な砂糖はありません。写真が読み込まれており、幅と高さはすでに利用可能である唯一の値をログに記録するawait/asyncを使用する方法

function loadImage(url) { 
    return new Promise((resolve, reject) => { 
    const img = new Image(); 
    img.addEventListener('load',() => resolve(img)); 
    img.addEventListener('error', reject); // don't forget this one 
    img.src = url; 
    }); 
} 

？

あなたは答えの後に悪いタイトル（事前および事後編集）および編集のために

async function getImageData(url) { 
    const img = await loadImage(url); 
    return { width: img.naturalWidth, height: img.naturalHeight }; 
} 
async function ready() { 
    console.log(await getImageData(this.url)) 
}