vue axios post发送复杂对象问题

当使用 Vue.js 结合 axios 提交一个复杂对象时，我们可能会遇到一个问题，即该请求传输时无法正确解析该对象。这可能是因为该对象被序列化成了字符串，导致后端无法正确解析该请求。下面将详细介绍如何解决这一问题。

问题原因

axios 内部使用了 JSON.stringify 将该对象进行序列化，并将其存储在请求正文中。这样，后端无法正确解析该请求。

解决方案

为了避免将对象序列化成字符串传输，我们可以使用 FormData 对象。

FormData 对象是一个键值对集合，每个值可以是一个字符串或是一个 Blob 对象（即文件之类的二进制数据）。我们可以通过 FormData 对象将复杂对象进行包装，并以标准表单方式传输。

下面是一个示例：

// 将对象转换为 FormData
let formData = new FormData()
formData.append('username', 'myusername')
formData.append('first_name', 'myfirstname')

// 发送 POST 请求
axios.post('/api/user/', formData)
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

在这个示例中，我们使用 FormData 对象将对象转换为标准表单格式，并使用 axios 发送 POST 请求。这样就不会将该对象序列化成字符串。

另一个示例是使用 qs 库，该库可以将对象序列化成一个 URL 查询字符串，然后将其作为请求正文中的数据进行传输。

import qs from 'qs'

// 定义一个复杂对象
let user = {
  username: 'myusername',
  first_name: 'myfirstname'
}

// 将对象序列化为 URL 查询字符串
let data = qs.stringify(user)

// 发送 POST 请求
axios.post('/api/user/', data, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

在这个示例中，我们使用 qs 库将对象序列化成 URL 查询字符串，并将其作为请求正文进行传输。注意，我们还需要设置正确的请求头 Content-Type。

通过这两个示例，我们可以解决 Vue.js 结合 axios 发送复杂对象时无法正确解析该对象的问题。