以下函数从url获取图像并进行加载,然后返回其宽度和高度:
function getImageData (url) { const img = new Image() img.addEventListener('load', function () { return { width: this.naturalWidth, height: this.naturalHeight } }) img.src = url }
问题是,如果我做这样的事情:
ready () { console.log(getImageData(this.url)) }
我得到,undefined因为该函数运行但图像尚未加载。
undefined
仅当照片已加载且宽度和高度已可用时,如何使用等待/异步返回值?
如何使用async/ await将此回调函数转换为Promise?
async
await
你不知道与往常一样,您可以使用newPromise构造函数。没有语法糖。
newPromise
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; }); }
仅当照片已加载且宽度和高度已经可用时,如何使用await/ async记录值?
你可以做
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)) }