前后端通信细节

浏览器和服务器端通过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