Vue.js项目中使用Axios发送POST请求能否传递对象数组及最优方法

1. 直接传递数组作为请求体（推荐，适用于后端接收JSON格式的场景） #

Axios默认会把JavaScript对象/数组序列化为JSON格式，还会自动设置Content-Type: application/json请求头，这也是Vue项目里最常用的做法。

在Vue组件里可以这么写：

// 假设在Vue组件的methods中定义方法
async submitUserList() {
  const userList = [{id: 1, name: 'max'}, {id: 2, name: 'jhon'}, {id: 3, name: 'anna'}];
  try {
    const response = await axios.post('/api/users', userList);
    console.log('请求成功:', response.data);
    // 这里可以添加成功后的逻辑，比如用户提示、页面跳转等
  } catch (error) {
    console.error('请求失败:', error);
    // 处理错误情况，比如给用户展示错误提示
  }
}

这种方式的前提是你的后端接口已经配置好接收JSON格式的数组参数（比如Node.js/Express里启用express.json()中间件，Java Spring里用@RequestBody注解绑定参数等）。

2. 将数组包裹在对象中传递（适用于后端需要特定参数名的场景） #

如果后端接口期望接收的是一个包含数组的对象（比如要求参数名为userList），只需要把数组放到一个对象里即可：

async submitUserList() {
  const userList = [{id: 1, name: 'max'}, {id: 2, name: 'jhon'}, {id: 3, name: 'anna'}];
  try {
    const response = await axios.post('/api/users', {
      userList // ES6简写，等价于userList: userList
    });
    console.log('请求成功:', response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

这种情况下后端就能通过userList这个参数名直接获取到数组数据。

3. 转换为FormData传递（适用于后端仅接收表单数据的场景） #

如果后端接口要求接收multipart/form-data格式的表单数据，你需要把数组转换为FormData格式。不过这种场景比较少见，一般只有上传文件时才会用到，处理数组时要按照后端约定的格式添加：

async submitUserList() {
  const userList = [{id: 1, name: 'max'}, {id: 2, name: 'jhon'}, {id: 3, name: 'anna'}];
  const formData = new FormData();
  
  // 按后端约定的格式添加数组元素
  userList.forEach((user, index) => {
    formData.append(`users[${index}].id`, user.id);
    formData.append(`users[${index}].name`, user.name);
  });
  // 也可以把数组序列化为JSON字符串后添加
  // formData.append('userList', JSON.stringify(userList));

  try {
    const response = await axios.post('/api/users', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('请求成功:', response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

总结：绝大多数Vue+Axios项目中，直接传递数组作为请求体（第一种方式）就是最佳实践，只要后端支持JSON接收即可。如果后端有特殊参数格式要求，再根据情况选择第二种或第三种方式。

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