React Native异步函数中嵌套For循环执行顺序异常问题

核心问题本质 #

你遇到的问题是异步操作未被正确等待：RNFS.readFile是返回Promise的异步方法，但你在嵌套循环中调用它时，没有通过await等待其执行完成就直接构造了最终JSON，导致图片Base64数据还未读取并赋值，最终JSON自然缺失这部分内容。

具体解决方案 #

1. 串行处理图片（简单易维护，适合少量图片） #

将循环改为支持await的for...of或普通for循环，逐个等待图片读取完成后再继续下一项，确保所有图片数据填充完毕后再构造JSON。

示例代码：

// 封装图片处理函数
async function processAuditItemsWithImages(auditItems) {
  for (const item of auditItems) {
    if (item.imageUri) {
      try {
        // 等待图片读取完成，再赋值到item对象
        item.imageBase64 = await RNFS.readFile(item.imageUri, 'base64');
        // 若API要求带前缀，可在此添加：
        // item.imageBase64 = `data:image/jpeg;base64,${item.imageBase64}`;
      } catch (err) {
        console.error('读取图片失败:', err);
        // 错误处理：设为空值或默认图
        item.imageBase64 = '';
      }
    }
  }
  return auditItems;
}

// 改造GetFullAuditData函数
async function GetFullAuditData(auditId) {
  // 1. 从数据库获取主审计数据（确保已await异步查询）
  const mainAuditData = await db.query('SELECT * FROM audits WHERE id = ?', [auditId]);
  
  // 2. 获取关联的带图片URI的子项数据（同样确保await）
  const auditItems = await db.query('SELECT * FROM audit_items WHERE audit_id = ?', [auditId]);
  
  // 3. 等待所有图片处理完成
  const processedItems = await processAuditItemsWithImages(auditItems);
  
  // 4. 此时所有图片Base64已就绪，构造最终JSON
  const finalAuditJson = {
    id: mainAuditData.id,
    title: mainAuditData.title,
    items: processedItems
    // 其他需要的字段
  };
  
  return finalAuditJson;
}

// 调用SendFullAudit时确保await
async function SendFullAudit(auditId) {
  const completeAuditData = await GetFullAuditData(auditId);
  // 提交到API
  await fetch('你的API地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(completeAuditData)
  });
}

2. 并行处理图片（提升效率，适合大量图片） #

如果图片数量较多，串行处理速度慢，可以用Promise.all并行处理所有图片读取操作，同时注意添加错误处理避免单个失败导致全流程中断。

示例代码：

async function processAuditItemsWithImages(auditItems) {
  // 用Promise.all并行处理所有图片
  return Promise.all(auditItems.map(async (item) => {
    if (!item.imageUri) return item;
    
    try {
      const base64Data = await RNFS.readFile(item.imageUri, 'base64');
      return { ...item, imageBase64: base64Data };
    } catch (err) {
      console.error(`处理图片${item.imageUri}失败:`, err);
      return { ...item, imageBase64: '' };
    }
  }));
}

3. 避坑提示 #

• 禁止用forEach处理异步循环：forEach会忽略await，导致异步操作并行执行但外层代码不等待，直接跳过到构造JSON的步骤。
• 确保数据库查询已await：如果获取图片URI的数据库查询未加await，会拿到空数据或未解析的Promise，后续图片处理自然无效。
• 必须添加错误捕获：单个图片读取失败时，用try/catch保证流程继续，避免整个审计提交失败。

内容的提问来源于stack exchange，提问作者Tiago Martins