如何使用 async/await 将此回调转换为Promise?

IT技术 javascript asynchronous promise async-await
2021-01-30 20:27:34

以下函数从 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因为该函数运行但尚未加载成像。

仅当照片已加载且宽度和高度已可用时,如何使用 await/async 返回值?

2个回答

如何使用async/await将这个回调函数变成一个 promise?

你没有。像往常一样,您使用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))
}

这个库工作得很好 - 它允许连接到子进程,或者如果需要,只需异步返回结果:https : //github.com/expo/spawn-async