常见数据格式

  1. Content-Type:application/json
    请求体中的数据以json字符串形式发送后端

  2. Content-Type:application/x-www-form-urlencoded
    数据以普通表单形式（键值对）发送后端

  3. CONTENT-Type:multipart/form-data
    将请求体的数据处理为一条消息，以标签为单元，分隔符分开。既可以上传键值对，也可以上传文件

application/x-www-form-urlencoded

  • URLSearchParams
1
2
3
4
5
6
7
8
9
let param = new URLSearchParams()
param.append('username', 'zhangsan')
param.append('password', '123456')

axios({
  method: 'post',
  url: 'api/lockServer/search',
  data: param
})

URLSearchParams 不支持所有浏览器

  • 配置 axios 请求头指定
1
2
3
4
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
{ headers: {
  'Content-type': 'application/x-www-form-urlencoded'
}}
  • 将参数转换成 query 参数，利用 qs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Qs from 'qs'
let data = {
    "username": "cc",
    "psd": "123456"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

Content-Type:multipart/form-data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let params = new FormData()
params.append('file', this.file)
params.append('id', localStorage.getItem('userID'))
params.append('userName', this.name)
params.append('sex', this.sex)
params.append('mobile', this.phone)
params.append('email', this.email)
params.append('qq', this.qq)
params.append('weChat', this.WeChat)

axios.post(URL, params, { headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
  if (res.data.code === 0) {
    this.$router.go(-1)
  }
}).catch(error => {
  ...
})

Content-Type:application/json

axios 默认请求数据类型，只需将参数序列化 json 字符串