https請求的幾種方式


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
image
因為也是 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-datamultipart/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 就行:
image
application/json 作為響應頭比較常見,目前也流行在 POST 請求中使用,以序列化的 JSON 字符串形式傳輸,更易於后端解析,可讀性更高。

微信小程序中 wx.request API 默認便是使用此方式傳輸數據。

總結:

multipart/form-data:既可以上傳文件等二進制數據,也可以上傳表單鍵值對,只是最后會轉化為一條信息;

x-www-form-urlencoded:只能上傳鍵值對,並且鍵值對都是間隔分開的。(用Qs庫轉換)

application/json: 以序列化的 JSON 字符串形式傳輸


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM