循环中使用Axios发送POST请求时重复提交最后一项的问题

这个问题我之前也踩过坑！核心原因是JavaScript引用类型的特性在搞鬼——你在循环里直接复用了req.chasm.chatResponse这个对象的引用，所有请求最终都指向同一个内存地址的对象。当循环走到最后一次时，这个对象的attachments被改成了最后一项，导致所有请求都用了这个最终修改后的对象。

具体修复方案 #

我们需要确保每次循环都创建一个独立的chatResponse对象，彻底避免引用共享，这里有两种简单好用的实现方式：

方式1：深拷贝对象（推荐，适配嵌套对象场景）

把原对象深拷贝一份，这样每次循环的chatResponse都是全新的独立对象，修改不会影响其他请求：

async sendMessage(req) {
  let axiosArray = [];
  const loopCount = req.chasm.attachments.length || 1;

  for (let i = 0; i < loopCount; i += 1) {
    // 深拷贝原chatResponse，创建完全独立的新对象
    let chatResponse = JSON.parse(JSON.stringify(req.chasm.chatResponse));
    if (i > 0 && req.chasm.attachments[i]) {
      chatResponse.attachments = req.chasm.attachments[i];
    }
    const newPromise = axios({
      method: 'post',
      url: this.serviceUri,
      data: chatResponse
    });
    axiosArray.push(newPromise);
  }

  // 等待所有请求完成并返回结果
  return Promise.all(axiosArray);
}

方式2：扩展运算符浅拷贝（适用于无嵌套的简单对象）

如果chatResponse是没有嵌套结构的简单对象，用扩展运算符快速创建新对象也可以：

async sendMessage(req) {
  let axiosArray = [];
  const loopCount = req.chasm.attachments.length || 1;

  for (let i = 0; i < loopCount; i += 1) {
    // 用扩展运算符复制原对象，按需覆盖attachments属性
    let chatResponse = {
      ...req.chasm.chatResponse,
      ...(i > 0 && req.chasm.attachments[i] ? { attachments: req.chasm.attachments[i] } : {})
    };
    const newPromise = axios({
      method: 'post',
      url: this.serviceUri,
      data: chatResponse
    });
    axiosArray.push(newPromise);
  }

  return Promise.all(axiosArray);
}

原代码出问题的本质 #

当你写let chatResponse = req.chasm.chatResponse;时，并没有创建新对象，只是把chatResponse变量指向了原对象的内存地址。循环中每次修改chatResponse.attachments，都是在修改同一个原对象的属性。当所有Axios请求最终执行时，这个对象已经被循环的最后一次迭代修改成了最后一项的attachments，所以所有请求都发送了最后一项的数据。

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