瀏覽器和服務器端通過HTTP報文進行通信，HTTP報文是一段按照特定格式編寫的字符串。在前后端通信過程中，發(fā)送方需要將數(shù)據(jù)轉換為字符串，接收方從字符串中解析出自己想要的數(shù)據(jù)。所以在發(fā)送方發(fā)出的報文中有2項數(shù)據(jù)必不可少，數(shù)據(jù)轉換后的字符串和字符串的轉換格式。也就是HTTP報文的主體部分和首部字段中的Content-Type。
在通信過程中，常用的數(shù)據(jù)格式有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 發(fā)送請求

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
})

總結

• 在發(fā)送數(shù)據(jù)時，需要發(fā)送正確的Content-Type和指定格式的字符串
• 傳入URLSearchParams, FormData的實例時，請求發(fā)送時會自動添加對應的Content-Type。如果傳入的是字符串，Content-Type默認為text/plain，需要手動指定Content-Type