Como transformar este callback em uma promise usando async / await?

A seguinte function é obtida e a imagem de uma URL, carrega-a e retorna sua largura e altura:

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

O problema é, se eu fizer algo assim:

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

Eu fico undefined porque a function é executada, mas a imagem ainda não foi carregada.

Como usar o wait / async para retornar o valor somente quando a foto foi carregada e a largura e a altura já estão disponíveis?

Como usar async / await para transformar essa function de callback em uma promise?

Você não Como de costume, você usa o new Promise construtor new Promise . Não há açúcar sintático para isso.

 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; }); } 

Como usar o await / async para registrar o valor somente quando a foto foi carregada e a largura e a altura já estão disponíveis?

Você pode fazer

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