如何在嵌套对象迭代中使用Async/Await回调替换Blob URL为Base64

问题根源 #

你的同步deepReplace函数失效，是因为异步回调返回的是Promise，但同步遍历不会等待这些Promise完成，直接返回了未处理的空结构或未解析的Promise，导致最终结果不符合预期。要解决这个问题，需要将deepReplace改造为异步函数，全程处理异步等待逻辑。

实现步骤 #

1. 编写Blob URL转Base64的异步函数

async function blobUrlToBase64(blobUrl) {
  const response = await fetch(blobUrl);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

2. 改造异步版的deepReplace函数

async function deepReplace(obj, targetKey, asyncHandler) {
  // 处理数组：用Promise.all等待所有元素处理完成
  if (Array.isArray(obj)) {
    return Promise.all(obj.map(item => deepReplace(item, targetKey, asyncHandler)));
  }

  // 处理非null对象：遍历属性并异步处理
  if (typeof obj === 'object' && obj !== null) {
    const processedObj = {};
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (key === targetKey) {
          // 命中目标key，等待异步处理结果
          processedObj[key] = await asyncHandler(obj[key]);
        } else {
          // 递归处理嵌套结构，等待结果
          processedObj[key] = await deepReplace(obj[key], targetKey, asyncHandler);
        }
      }
    }
    return processedObj;
  }

  // 非对象/数组类型，直接返回原值
  return obj;
}

3. 使用示例

// 示例嵌套数据
const nestedData = [
  {
    src: 'blob:http://your-domain.com/xxx',
    details: {
      src: 'blob:http://your-domain.com/yyy',
      otherField: 'test'
    }
  },
  {
    src: 'blob:http://your-domain.com/zzz'
  }
];

// 处理数据并发送到服务器
async function processAndSend() {
  try {
    const processedData = await deepReplace(nestedData, 'src', blobUrlToBase64);
    // 发送处理后的数据
    await fetch('/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(processedData)
    });
  } catch (err) {
    console.error('处理或发送失败:', err);
  }
}

processAndSend();

核心要点 #

• 所有递归调用和异步操作必须用await等待完成，确保结构处理完毕后再返回
• 数组处理用Promise.all批量等待所有元素的异步处理结果，保证数组顺序和完整性
• 必须在异步函数中调用deepReplace，并使用await接收最终处理后的结果

内容的提问来源于stack exchange，提问作者achip Baba