如何用Promise.all优化Confluence图片转Data URL的异步逻辑？

核心思路 #

通过map生成处理每张图片的Promise数组，用Promise.all等待所有异步操作完成后返回最终HTML。用async/await替代.then()能大幅简化代码，避免回调嵌套的混乱。

实现步骤 #

1. 解析HTML为DOM对象：方便批量获取和修改所有<img>标签
2. 生成Promise数组：每个Promise负责将单张图片的URL转为Data URL
3. 等待全部异步操作完成：用Promise.all确保所有图片处理完毕后再生成最终HTML
4. 返回处理后的HTML：将修改后的DOM对象转回字符串

代码示例 #

async function replaceImgSrcWithDataUrl(originalHtml) {
  // 解析HTML到DOM
  const domParser = new DOMParser();
  const doc = domParser.parseFromString(originalHtml, 'text/html');
  const imgElements = Array.from(doc.querySelectorAll('img'));

  // 生成处理图片的Promise数组
  const processImgTasks = imgElements.map(async (img) => {
    const imgUrl = img.src;
    // 跳过已为Data URL的图片
    if (!imgUrl || imgUrl.startsWith('data:')) return;

    try {
      // 异步获取图片Blob
      const response = await fetch(imgUrl);
      const imgBlob = await response.blob();
      // 将Blob转为Data URL
      const dataUrl = await new Promise((resolve) => {
        const fileReader = new FileReader();
        fileReader.onload = () => resolve(fileReader.result);
        fileReader.readAsDataURL(imgBlob);
      });
      // 替换src属性
      img.src = dataUrl;
    } catch (error) {
      console.error(`图片处理失败 ${imgUrl}:`, error);
      // 可选：失败时保留原URL或设置占位图
    }
  });

  // 等待所有图片处理完成
  await Promise.all(processImgTasks);

  // 返回处理后的HTML字符串
  return doc.documentElement.outerHTML;
}

// 使用方式
async function exportProcessedHtml() {
  const confluenceHtml = '你的Confluence原始HTML内容';
  const finalHtml = await replaceImgSrcWithDataUrl(confluenceHtml);
  // 这里执行导出逻辑，比如保存为文件
  console.log(finalHtml);
}

关键说明 #

• Promise.all的作用：它会等待传入的所有Promise都执行完成，才会继续后续代码，确保所有图片都处理完毕后再生成最终HTML，不会出现部分图片未替换的情况。
• async/await的优势：相比链式.then()，它的写法更接近同步代码，避免了多层嵌套导致的回调地狱，变量作用域更清晰，调试也更方便。

内容的提问来源于stack exchange，提问作者Adrian Föder