如何使用for循环配合fetch向服务器逐组发送多组对应数据

你尝试在JSON.stringify()的参数对象内部直接写for循环的写法完全不可行。
JavaScript对象字面量的语法规则只允许在大括号内定义键值对形式的属性，不支持直接嵌入for循环这类流程控制语句，这段代码运行时会直接抛出语法错误，无法正常执行。

你需要的逐组依次发送数据的逻辑，要把循环逻辑写在请求调用的外层，每次循环生成一组符合单组提交格式的参数，单独发起一次POST请求即可。考虑到fetch是异步API，要实现「依次发送、上一组请求处理完成再发下一组」的效果，推荐用async/await配合普通for循环实现，同时补上原代码缺失的JSON请求头（多数后端要求携带该头才会正确解析JSON格式的请求体）：

const submit = async e => {
  e.preventDefault();
  // 你存储的两个等长对应数组
  const productOptionIds = [4, 3];
  const counts = [1, 2];

  try {
    // 逐组遍历，按顺序发请求
    for (let i = 0; i < productOptionIds.length; i++) {
      const response = await fetch('', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        // 每次循环生成单组提交的参数，和你原有单组提交格式完全一致
        body: JSON.stringify({
          product_option_id: productOptionIds[i],
          quantity: counts[i]
        })
      });
      const result = await response.json();
      // 某一组提交失败直接终止流程抛错
      if (!result.success) throw new Error('商品提交失败');
    }
    // 所有组全部提交成功后再跳转购物车
    goToCart();
  } catch (err) {
    alert('提交出错，请重试');
  }
};

实现说明 #

• 用await等待单次fetch请求完成后再进入下一轮循环，严格保证请求按数组顺序逐组发送，不会出现乱序。
• 只要有任意一组提交失败，就会直接进入catch逻辑弹出错误提示，不会继续发送后续请求、也不会提前跳转。
• 如果你不需要严格按顺序逐组发送，允许并发请求，可以用Promise.all批量发起所有请求，但这种方式不属于逐组依次发送的范畴，不符合你当前的需求。

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