如何使用async/await将此回调转换为承诺？

Question

以下函数从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因为函数运行但imaged尚未加载.

如何使用await/async仅在照片加载且宽度和高度已经可用时返回值？

Answer 1

如何使用async/ await将此回调函数转换为承诺？

你没有.像往常一样,您使用new Promise构造函数.对此没有语法糖.

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