Promise 异步加载图片

问题

使用 Promise 封装一个异步加载图片的方法。

解答

通过 Promise 包装图片加载过程，在 onload 时 resolve 返回图片对象，在 onerror 时 reject 返回错误信息。

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      resolve(img);
    };
    img.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
    img.src = url;
  });
}

使用示例：

loadImg('https://example.com/image.jpg')
  .then(img => {
    document.body.appendChild(img);
  })
  .catch(err => {
    console.error(err);
  });

关键点

• 创建 Image 对象后，设置 src 会触发图片加载
• onload 事件在图片加载成功后触发，此时 resolve 返回图片对象
• onerror 事件在加载失败时触发，reject 返回错误信息
• 必须在设置 src 之前绑定 onload 和 onerror 事件