如何使用async/await处理Image.onload事件？现有代码遇阻求助

嘿，我明白你卡在哪了——img.onload是个回调赋值，直接给它套await肯定行不通，因为await只能等Promise对象，不是随便什么函数都能await的。

先看你原来的代码，其实已经用Promise把图片加载的回调逻辑封装好了，这一步是对的：

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，你只需要在调用这个函数的地方用async函数包裹，然后await它就行：

// 定义一个async函数来消费load返回的Promise
async function getImageInfo(url) {
  try {
    // await 等待load函数的Promise完成
    const imgData = await load(url);
    console.log(`图片URL：${imgData.url}，比例：${imgData.ratio}`);
    return imgData;
  } catch (err) {
    // 补充：原来的代码没处理加载失败，这里最好加上错误捕获
    console.error('图片加载出错了：', err);
  }
}

// 调用示例
getImageInfo('https://example.com/your-image.jpg');

如果你想把load本身改成async函数，其实逻辑和原来差不多——async函数本质上也是返回Promise，所以你可以把Promise封装的逻辑直接放在async函数里返回：

const load = async url => {
  // 在async函数内部返回一个Promise
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve({ url, ratio: img.naturalWidth / img.naturalHeight });
    };
    // 一定要加上错误处理，不然加载失败时Promise会一直pending
    img.onerror = () => {
      reject(new Error(`无法加载图片：${url}`));
    };
    img.src = url;
  });
};

为什么你之前的写法不对？因为你尝试await img.onload = () => ({...})——这行代码其实是给img.onload赋值了一个函数，赋值操作的返回值是那个函数本身，不是Promise，所以await这个函数完全没用，根本等不到图片加载完成的时机。

记住核心点：async/await是Promise的语法糖，只有Promise对象才能被await。回调式的API（比如img.onload）必须先转换成Promise，才能用async/await来处理。

内容的提问来源于stack exchange，提问作者Eduard