浏览器和服务器端通过HTTP报文进行通信，HTTP报文是一段按照特定格式编写的字符串。在前后端通信过程中，发送方需要将数据转换为字符串，接收方从字符串中解析出自己想要的数据。所以在发送方发出的报文中有2项数据必不可少，数据转换后的字符串和字符串的转换格式。也就是HTTP报文的主体部分和首部字段中的Content-Type。
在通信过程中，常用的数据格式有3种：
- application/x-www-form-urlencoded
- application/json
- multipart/form-data
application/x-www-form-urlencoded 浏览器进行表单提交时的默认格式。它转换后的字符串类似于: a=1&b[]=1&b[]=2
application/json 将对象转换成JSON格式的字符串。
multipart/form-data 文件上传时的常用格式。它转换后的字符串类似于:
content-type:multipart/form-data; boundary=----WebKitFormBoundaryfYEKVEWblXlNxM6N
------WebKitFormBoundaryfYEKVEWblXlNxM6N
Content-Disposition: form-data; name="file"; filename="foo.txt"
Content-Type: text/plain
------WebKitFormBoundaryfYEKVEWblXlNxM6N
Content-Disposition: form-data; name="a"
1
------WebKitFormBoundaryfYEKVEWblXlNxM6N
Content-Disposition: form-data; name="b"
2
------WebKitFormBoundaryfYEKVEWblXlNxM6N--
通过Fetch 发送请求
application/x-www-form-urlencoded
通过URLSearchParams构造字符串
var data = new URLSearchParams()
data.append('a', 1)
data.append('b', 2)
fetch('/abc', {
method: 'POST',
body: data
})
通过第三方库构造字符串
var formurlencoded = require('form-urlencoded');
fetch('/abc', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: formurlencoded({a: 1, b: 2})
})
application/json
fetch('/abc', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({a: 1, b: 2})
})
multipart/form-data
var data = new FormData()
data.append('file', file)
data.append('b', 2)
fetch('/abc', {
method: 'POST',
body: data
})
总结
- 在发送数据时，需要发送正确的
Content-Type和指定格式的字符串 - 传入
URLSearchParams,FormData的实例时，请求发送时会自动添加对应的Content-Type。如果传入的是字符串，Content-Type默认为text/plain，需要手动指定Content-Type
