题目

我们将实现一个 createImage 函数，该函数返回一个 Promise，用于处理图片加载的异步操作。此外，还会实现暂停执行的 wait 函数。

Part 1: createImage 函数

该函数会：

1. 创建一个新的图片元素。
2. 将图片的 src 设置为提供的路径。
3. 监听图片的加载（load 事件）和错误（error 事件）。
4. 将图片追加到 DOM 中的 .images 容器。
5. 使用 Promise 来处理加载的成功或失败。

Part 2: 消费 Promise

• 使用 .then 处理加载成功的图片。
• 使用一个 wait 函数来暂停3秒。
• 隐藏当前图片并加载新图片。
• 正确处理错误情况。

代码示例

第一部分

//创建要插入的容器，这里class标签再HTML中
const imgContainer = document.querySelector('.images');

//这个函数返回一个promise，用于异步加载图片
const createImage = function (imgsrc) {
    //返回一个新的promise实例；
  return new Promise(function (resolve, reject) {
      //创建元素，并且指定路径
    const img = document.createElement('img');
    img.src = imgPath;

      //当图片成功加载成功时，讲img追加到imgContainer中
    img.addEventListener('load', function () {
      imgContainer.append(img);
        //调用resolve，把加载完成的图片传递出去
      resolve(img);
    });
      //如果图像加载失败，调用reject传递错误对象
    img.addEventListener('error', function () {
      reject(new Error('未找到图片'));
    });
  });
};

第二部分

let currentImg;
createImage('img/img-1.jpg')
  .then(img => {
    currentImg = img;
    console.log('图片正在加载中。。');
    return wait(3);
  })
  .then(() => {
    currentImg.style.display = 'none';
    return createImage('img/img-2.jpg');
  })
  .then(img => {
    currentImg = img;
    console.log('图片正在加载中。。。');
    return wait(3);
  })
  .then(() => (currentImg.style.display = 'none'))
  .catch(err => console.error(err));