使用axios在for循环中逐行发送数组数据的优化方案咨询

现有实现的核心问题 #

你当前的代码存在几个明显的缺陷：

• 循环中复用同一个FormData实例，每次append参数都会累加，后续请求会携带前面所有条目的冗余参数，完全不符合单条提交的要求
• 异步请求没有做顺序控制，多个请求并发发送，返回顺序不可控，而且弹窗中写的datas.name是错误写法：datas是整个数组，根本拿不到当前提交条目的名称
• 没有做加载状态的收尾处理，请求全部完成后没有把display状态改回false

更优方案 #

方案一：后端支持批量提交（最推荐，性能最优） #

如果后端接口可以调整为接收整个数组，直接一次性提交所有数据，能大幅减少请求次数，避免并发问题：

handleSaveTarget = async(e) =>{
  e.preventDefault();
  const data = this.data;
  if(!data) {
    return swal({
      title: "Data Not Found",
      text: "Something's Wrong!",
      icon: "error",
      dangerMode: false,
    })
  }

  const agree = await swal({
    title: "Are You Sure ?",
    text: "Save",
    icon: "warning",
    buttons: true,
    dangerMode: false,
  })
  if(!agree) return;

  this.setState({display: true});
  const sessiondata = JSON.parse(localStorage.getItem("sessiondata"));
  const submitData = this.state.ref_data.map(item => ({
    id_sp: sessiondata.i_idunit,
    id_point: 1,
    kelompok_jenjang: item.name,
    value: item.value
  }))

  try {
    // 直接传json数组，不需要FormData，后端按数组解析即可
    await axios.post(AppConfig.SaveTarget, { data: submitData });
    swal({
      title: "操作成功",
      text: "所有Target Masa Studi Berhasil Disimpan.",
      icon: "success",
      dangerMode: false,
    })
  } catch(err) {
    swal({
      title: "操作失败",
      text: "Target Masa Studi Gagal Disimpan.",
      icon: "error",
      dangerMode: false,
    })
  } finally {
    this.setState({display: false});
  }
}

方案二：必须逐行单条提交的优化方案 #

如果后端强制要求每次只能提交一条，就做好异步顺序控制，避免并发混乱：

handleSaveTarget = async(e) =>{
  e.preventDefault();
  const data = this.data;
  if(!data) {
    return swal({
      title: "Data Not Found",
      text: "Something's Wrong!",
      icon: "error",
      dangerMode: false,
    })
  }

  const agree = await swal({
    title: "Are You Sure ?",
    text: "Save",
    icon: "warning",
    buttons: true,
    dangerMode: false,
  })
  if(!agree) return;

  this.setState({display: true});
  const sessiondata = JSON.parse(localStorage.getItem("sessiondata"));
  const datas = this.state.ref_data;
  let successCount = 0;
  let failCount = 0;

  // 按顺序逐条发送，等待上一条返回再发下一条
  for(let i=0; i < datas.length; i++){
    // 每次循环都新建FormData，避免参数累加
    const formData = new FormData();
    const currentItem = datas[i];
    formData.append('data[id_sp]', sessiondata.i_idunit);
    formData.append('data[id_point]', 1);
    formData.append('data[kelompok_jenjang]', currentItem.name);
    formData.append('data[value]', currentItem.value);
    
    try {
      await axios.post(AppConfig.SaveTarget, formData);
      successCount++;
    } catch(err) {
      failCount++;
      // 可以在这里记录失败的条目，后续做重试
      console.error(`提交${currentItem.name}失败`, err);
    }
  }

  // 全部完成后统一提示，避免弹一堆窗
  swal({
    title: "操作完成",
    text: `成功提交${successCount}条，失败${failCount}条`,
    icon: failCount === 0 ? "success" : "warning",
    dangerMode: false,
  })
  this.setState({display: false});
}

这个方案的优势：

• 每次循环新建FormData实例，参数不会累加
• 用async/await控制请求顺序，逐条发送逻辑清晰
• 统一统计提交结果，不会弹出一堆通知干扰用户
• 加了收尾逻辑重置加载状态，避免界面一直处于加载中

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