使用Axios插入数据后无法获取最新记录的问题求助

核心问题分析 #

你遇到的问题本质是异步请求的执行顺序问题：

• 示例1中，for循环里的Axios.post是异步任务，循环结束后立刻执行Axios.get，此时所有插入请求可能还没完成，自然拿不到最新记录。
• 示例2中，每个post完成后都触发get，但如果kLen大于1，会重复发起get请求，且可能前一次get还没返回，后一次插入又完成了，最终拿到的结果不一定是所有插入后的完整数据。

可行解决方案 #

方案1：用Promise.all等待所有插入请求完成后再查询 #

把所有post请求收集到一个数组里，用Promise.all等待全部完成后，再执行一次get请求，确保所有插入操作都已结束：

const [listF, setListFin] = useState([])
const [fLen, setLenFin] = useState([])

const addRecord = async () => { 
  // 收集所有post请求的Promise
  const postPromises = [];
  for(let x = 0; x < kLen; x++){
    const promise = Axios.post(mURL+"/api/insert-profilematching", {      
      id_karyawan:id_karyawan,
      kd_kriteria:listK[x].kd_kriteria,
      nilai:s_kriteria[x],
      s_gap:s_gap,
      bobot_ideal:listK[x].bobot_ideal, 
    });
    postPromises.push(promise);
  };

  // 等待所有插入请求完成
  await Promise.all(postPromises);

  // 再执行查询请求
  const response = await Axios.get(mURL+"/api/list-supertable-cfsf");
  setListFin(response.data);
  setLenFin(response.data.length);
}

console.log(listF)

方案2：直接用插入的响应数据更新前端状态（更高效） #

如果后端的post接口会返回刚插入的记录，你可以直接把这些记录合并到现有state里，不需要再调用get请求，减少一次网络请求：

const [listF, setListFin] = useState([])
const [fLen, setLenFin] = useState([])

const addRecord = async () => { 
  const postPromises = [];
  for(let x = 0; x < kLen; x++){
    const promise = Axios.post(mURL+"/api/insert-profilematching", {      
      id_karyawan:id_karyawan,
      kd_kriteria:listK[x].kd_kriteria,
      nilai:s_kriteria[x],
      s_gap:s_gap,
      bobot_ideal:listK[x].bobot_ideal, 
    });
    postPromises.push(promise);
  };

  // 获取所有插入的记录
  const insertResults = await Promise.all(postPromises);
  const newRecords = insertResults.map(res => res.data);

  // 更新状态：合并原有数据和新插入的数据
  setListFin(prev => [...prev, ...newRecords]);
  setLenFin(prev => prev + newRecords.length);
}

console.log(listF)

方案3：检查后端接口是否存在事务问题 #

如果上面的方法还是不行，要排查后端：

• 确认插入接口的事务是否已正确提交，比如有些后端框架默认不会自动提交事务，需要手动执行commit操作。
• 确认查询接口是否正确读取到最新的数据，比如是否存在缓存机制导致返回旧数据。

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