如何在多异步场景下正确使用LocalStorage缓存Blob图片？

你的核心问题是当前代码用forEach处理异步请求，且FileReader的onloadend属于异步操作，导致缓存存入数组的过程无法被等待，后续逻辑无法获取最新缓存数据。以下是修正后的实现方案：

关键优化点 #

• 将FileReader的异步操作封装为Promise，支持async/await等待转换完成
• 用map+Promise.all替代forEach，实现批量异步任务的统一等待
• 整合缓存判断、接口请求、Blob转换、缓存存入的全流程异步控制

完整代码实现 #

// 封装FileReader的readAsDataURL为Promise，方便await等待
const readBlobAsDataURL = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new window.FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
};

// 批量处理图片缓存的异步函数
const handleAssetImageCaching = async (assetNameFiltered, assetImageCached) => {
  // 生成所有待处理的异步任务数组
  const cacheTasks = assetNameFiltered.map(async (assetName) => {
    // 检查缓存是否已存在
    const cachedImage = assetImageCached?.find(item => item.id === assetName);
    if (cachedImage) return;

    // 缓存不存在，调用接口获取Blob
    const { data } = await useOperationServiceHook.getAssetImageByName(assetName);
    
    let imageData = '';
    if (data.size > 0) {
      // 等待Blob转DataURL完成
      imageData = await readBlobAsDataURL(data);
    }

    // 存入缓存（如果createAssetImageCache是异步函数，需添加await）
    createAssetImageCache({ id: assetName, image: imageData });
  });

  // 等待所有缓存操作完成
  await Promise.all(cacheTasks);
  // 所有缓存存入完成后，可在此执行依赖缓存的后续逻辑
};

// 调用示例
// handleAssetImageCaching(assetNameFiltered, assetImageCached);

说明 #

• Promise封装FileReader后，Blob转DataURL的异步流程可以被await控制，避免缓存存入时机不可控
• map生成的Promise数组通过Promise.all统一等待，确保所有缓存操作完成后才会执行后续代码
• 整个流程用async/await编写，逻辑清晰，所有异步步骤都处于可控的异步流中

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS