如何从此异步 function 返回值？ img.onLoad 事件

Question

如何从 function getImgSize(imgSrc)返回height ？ 请记住onload()是异步的。

function getImgSize(imgSrc) {
  const img = new Image();

  img.onload = function() {
    const height = img.height;
  }
  img.src = url;
}

Answer 1

您可以将其包装在promise中（称为“promisification” ）：

function getImgSize(imgSrc){
  const img = new Image();

  img.src = imgSrc;

  return new Promise((resolve, reject) => {
    img.onload = function() {
      const height = img.height; 

      resolve(height); // Promise resolves to this value
    };

    img.onerror = function(error) {
      reject(error); // Promise rejects with the error
    };
  });
}

但是你只能在异步上下文中调用这个 function 。 大多数现代浏览器都支持顶级等待（在 type=module 的脚本中），但以防万一，您可能希望将其包装在 function 中：

(async () => {
  const heightOfImage = await getImgSize("...");
})();