React中使用Promise.all批量将图片URL转为base64的实现方案

问题根因 #

你当前的forEach遍历仅执行了返回Promise的方法，但没有将生成的Promise实例收集到数组中，因此无法通过Promise.all批量等待所有异步任务执行完成。

实现方案 #

用Array.prototype.map代替forEach，将每个图片URL映射为对应的转base64的Promise实例，再传入Promise.all即可实现批量等待：

基础实现（.then写法） #

const imageUrls = ["exampleimageurl1", "exampleimageurl2", "exampleimageurl3"];
// 收集所有Promise实例
const base64Promises = imageUrls.map(url => this.getBase64ImageFromURL(url));

Promise.all(base64Promises)
  .then(base64List => {
    // 此处拿到的base64List就是和imageUrls顺序对应的base64结果数组
    console.log(base64List);
    // 后续可执行你的业务逻辑，比如存入React state等
  })
  .catch(error => {
    // 任意一张图片转换失败都会进入此处
    console.error('图片转换出错：', error);
  })

更推荐的async/await写法（React组件中常用） #

// 封装成异步方法
const batchConvertToBase64 = async () => {
  try {
    const imageUrls = ["exampleimageurl1", "exampleimageurl2", "exampleimageurl3"];
    const base64Promises = imageUrls.map(url => this.getBase64ImageFromURL(url));
    const base64List = await Promise.all(base64Promises);
    console.log(base64List);
    // 示例：存入React state
    // this.setState({ base64List })
  } catch (error) {
    console.error('图片转换出错：', error);
  }
}

// 调用方法即可触发批量转换
batchConvertToBase64();

可选优化：允许部分图片转换失败 #

如果需要避免单张图片失败导致所有结果都拿不到，可以替换Promise.all为Promise.allSettled，自行过滤成功的结果：

const results = await Promise.allSettled(base64Promises);
const base64List = results
  .filter(item => item.status === 'fulfilled')
  .map(item => item.value);

内容的提问来源于stack exchange，提问作者React-Developer