javascript - 异步等待图像加载事件触发器

Question

这个问题已经有答案了:

How to turn this callback into a promise using async/await? (2 个回答)

已关闭 5 年前。

我有一个奇怪的问题，我无法思考。

const load = url => {
  return new Promise( resolve => {
    const img = new Image()
    img.onload = () => resolve({ url, ratio: img.naturalWidth / img.naturalHeight })
    img.src = url
  })
}

我应该如何使用async / await鉴于 onload 只是一个回调分配...我陷入了以下困境:

const load = async url => {

    const img = new Image()
    img.src = url
    return await img.onload = () => ({ url, ratio: img.naturalWidth / img.naturalHeight })

    // cannot use await for img.onload obviously ..
    // nor can I put await in the onload function ... since it's not going to do anything

}

是否可以不使用resolve方法来解决？

Answer 1

我不明白你在第二段代码中想要做什么，但上面的代码工作得很好，可以像这样使用:

const load = url => new Promise( resolve => {
    const img = new Image()
    img.onload = () => resolve({ url, ratio: img.naturalWidth / img.naturalHeight })
    img.src = url
});

(async () => {
    const { url, ratio } = await load("<url>");
    // Do stuff with data.
})();

等待你需要 promise 。