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 字符串形式传输

posted @ 2022-01-10 20:36  飞鸟和蝉-  阅读(3517)  评论(0编辑  收藏  举报