Promise和async实现异步多图加载的微妙之处

2023-11-10 23:32:15

在日常Web开发中，异步多图加载是一个常见场景。比如，电商网站上的产品展示页面，通常需要同时加载多张图片，而只有当所有图片都加载完成后，才能显示页面内容。

要实现异步多图加载，我们可以使用Promise或async/await。这两种方法都可以实现异步编程，但它们在实现方式和适用场景上存在一些差异。

Promise实现异步多图加载

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
];

const loadImages = (images) => {
  const promises = [];

  for (let i = 0; i < images.length; i++) {
    const image = new Image();
    const promise = new Promise((resolve, reject) => {
      image.onload = () => resolve(image);
      image.onerror = () => reject(new Error(`Failed to load image: ${images[i]}`));
      image.src = images[i];
    });

    promises.push(promise);
  }

  return Promise.all(promises);
};

loadImages(images).then((images) => {
  // All images have been loaded successfully
  console.log(images);
}).catch((error) => {
  // An error occurred while loading the images
  console.error(error);
});

在上述代码中，首先创建一个images数组，其中包含了要加载的图片路径。然后，创建一个loadImages函数，该函数接收images数组作为参数。在loadImages函数中，我们使用循环遍历images数组，为每张图片创建一个Image对象和一个Promise对象。Image对象的onload和onerror事件处理程序分别用于在图片加载成功和加载失败时触发相应的操作。Promise对象的resolve和reject方法分别用于在图片加载成功和加载失败时触发相应的操作。然后，将Promise对象添加到promises数组中。

最后，使用Promise.all方法将promises数组中的所有Promise对象合并成一个新的Promise对象。Promise.all方法会等待所有Promise对象都resolve或reject，然后将结果作为参数传递给then或catch方法。在then方法中，我们可以对加载成功的图片进行操作，例如，将它们显示到页面上。在catch方法中，我们可以处理加载失败的图片，例如，显示错误信息。

async/await实现异步多图加载

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
];

const loadImages = async (images) => {
  const promises = [];

  for (let i = 0; i < images.length; i++) {
    const image = new Image();
    promises.push(new Promise((resolve, reject) => {
      image.onload = () => resolve(image);
      image.onerror = () => reject(new Error(`Failed to load image: ${images[i]}`));
      image.src = images[i];
    }));
  }

  const loadedImages = await Promise.all(promises);

  // All images have been loaded successfully
  console.log(loadedImages);
};

loadImages(images);

在上述代码中，我们使用async/await语法来实现异步多图加载。首先，创建一个images数组，其中包含了要加载的图片路径。然后，创建一个loadImages函数，该函数接收images数组作为参数。在loadImages函数中，我们使用循环遍历images数组，为每张图片创建一个Image对象和一个Promise对象。Image对象的onload和onerror事件处理程序分别用于在图片加载成功和加载失败时触发相应的操作。Promise对象的resolve和reject方法分别用于在图片加载成功和加载失败时触发相应的操作。然后，将Promise对象添加到promises数组中。

最后，使用await Promise.all(promises)等待所有Promise对象都resolve或reject。然后，将结果作为参数传递给loadImages函数的后面。在loadImages函数的后面，我们可以对加载成功的图片进行操作，例如，将它们显示到页面上。

Promise和async/await的对比

Promise和async/await都是用于实现异步编程的语法。它们的主要区别在于：

Promise是一种显式异步编程语法，需要手动创建Promise对象和使用then和catch方法来处理异步操作的结果。
async/await是一种隐式异步编程语法，它允许我们使用同步的写法来处理异步操作，从而使代码更加简洁易读。

在实现异步多图加载时，Promise和async/await都可以使用。但是，对于新手来说，使用Promise可能会更加容易理解和使用。

可能遇到的坑

在使用Promise或async/await实现异步多图加载时，可能会遇到以下几个坑：

忘记处理加载失败的情况。在实现异步多图加载时，一定要对图片加载失败的情况进行处理。否则，可能会导致页面上出现空白图片或其他错误。
忘记等待所有图片都加载完成。在使用Promise或async/await实现异步多图加载时，一定要等到所有图片都加载完成之后再对它们进行操作。否则，可能会导致页面上出现部分图片未加载的情况。
使用错误的图片路径。在实现异步多图加载时，一定要确保图片路径正确。否则，可能会导致图片加载失败。