http/https 向服務端傳遞數據的方式,基本可以分為 5 種:url param、query、form-urlencoded、form-data、json。
get請求常用數據類型:
要么是拼接在URl 后面, 要么就是 QueryString的方式傳遞,Content-Type 的值就不是那么重要了。
url param
Restful 的規范允許把參數寫在 url 中,比如:
http://c1998.cn/api/person/1111
這里的111就是路徑中的參數 (url params)
query
通過 url 中 ?后面的用 & 分隔的字符串傳遞數據。比如:
let data = {
name:'coder',
age:111
}
export const getExceptionHandling = (data) => {
return axios.axioseRquest({
url: 'http://c1998.cn/api/person',
method: 'get',
params: data
})
}
實際請求的路徑是: http://c1998.cn/api/person?name=coder&age=111
通過URL傳遞數據的方式就這兩種, 后面的3種是通過 body傳遞數據的方式
Post請求常用數據類型
對於 POST 請求,Content-Type 的值就非常重要了
application/x-www-form-urlencoded
直接用from 表單提交數據就是這種, 他和query字符串的方式的區別是放在了body里,
然后指定下 content-type是application/x-www-form-urlencoded
因為也是 query 字符串,所以也要用 encodeURIComponent 的 api 或者 QS的 庫QS.stringify處理下。
npm install qs
其實這種設計也很容易理解,get 是把數據拼成 query 字符串放在 url 后面,於是設計表單的 post 提交方式的時候就直接用相同的方式把數據放在了 body 里。
通過 & 分隔的 form-urlencoded 的方式需要對內容做 url encode,如果傳遞大量的數據,比如上傳文件的時候就不是很合適了,因為文件 encode 一遍的話太慢了,這時候就可以用 form-data。
form-data
form-data 需要指定 content type 為 multipart/form-data
,然后指定 boundary 也就是分割線。
對於二進制文件或者非 ASCII 字符的傳輸,application/x-www-form-urlencoded
是低效的。對於包含文件、二進制數據、非 ASCII 字符的內容,應該使用 multipart/form-data
。 multipart/form-data
的請求體包含多個部分,需要通過 boundary 字符分割。
通過 new FormData將文件轉成二進制數據
const formData = new FormData();
formData.append('controlId', this.node.itemId);
formData.append('file', option.file);
formData.append('roleId', this.$refs.role.currentValue);
export const getExceptionHandling = (data) => {
return axios.axioseRquest({
url: 'http://c1998.cn/api/person',
method: 'post',
data: formData
headers: { 'content-type': 'multipart/form-data' },
})
}
form-data既可以上傳文件等二進制數據,也可以上傳表單鍵值對,只是最后會轉化為一條信息;
json
form-urlencoded 需要對內容做 url encode,而 form data 則需要加很長的 boundary,兩種方式都有一些缺點。如果只是傳輸 json 數據的話,不需要用這兩種。
可以直接指定content type 為 application/json
就行:
application/json 作為響應頭比較常見,目前也流行在 POST 請求中使用,以序列化的 JSON 字符串形式傳輸,更易於后端解析,可讀性更高。
微信小程序中 wx.request API 默認便是使用此方式傳輸數據。