HTTP请求中Form Data与RequestPayload的区别

定义方式的区别

Form Data和RequestPayload是浏览器传输数据给接口的其中两种格式,浏览器是通过Content-Type来进行区分。
如果是application/x-www-form-urlencoded,则为formdata方式,如果是application/json方式,则为payload方式。

data数据类型的区别

RequestPayload 传输的data数据为json格式。
Form Data传输的data数据是类似于form表单提交的路由拼接式数据格式。

类型转换方法

axios post方法默认使用application/json格式,解决方案一是后端改变接收参数的方法,另外一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded
nodejs 可通过 body-parser 中间件处理:

nodejs之body-parser中间件
1
const bodyParser=require("body-parser");

关于前端修改axios post请求的编码格式方法有多种,常见有以下两种:

qs

官方包链接地址:https://www.npmjs.com/package/qs
通过qs.stringify(obj)即可转化编码格式。
在axios中可通过前置请求拦截器统一配置:
注:此配置方式只适用于post提交,其他请求方式需另行配置

1
2
3
4
5
6
7
8
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.data = qs.stringify(config.data)
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
axios之transformRequest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
this.$axios({
method:"post",
url:"/api/user",
headers:{
'Content-type': 'application/x-www-form-urlencoded'
},
data:{
name:this.name,
password:this.password
},
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
}).then((res)=>{
console.log(res.data);
})

关键点在于 transformRequest,axios官方如此示意:

1
2
3
transformRequest 允许在向服务器发送前,修改请求数据
只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream

通过transformRequest处理后的data数据即可转化为所需要的格式。