浏览器中接口请求方式的思考

在浏览器输入一个地址到获取整个html的过程中，建立TCP链接后，浏览器会发起http请求，服务端也会响应http请求。那么为什么会有接口请求方式的思考呢。

首先我们来看一个get请求。

image.png

Request Header是我们在发起http请求的过程中传递的附加消息，包含了用户代理的压缩方法、语言、当前的host、浏览器信息、用户cookie等信息。

image.png

参数的传递

image.png
image.png
假设使用axios的进行数据提交

let params = {cs:1,other:2}
axios.get(`${url}`,params).then(res=>{})
或者是
axios({
  method: 'get',
  url,
  params
}).then(res=>{})

post请求

1.application/json

image.png

对应的请求参数

let data = {job_id_array:[], education_background:[]}
axios.post(`${url}`,data).then(res=>{})
axios({
  method: 'post',
  url,
  data
}).then(res=>{})

image.png
image.png

2.multipart/form-data

对应的content-type是multipart/form-data

image.png

对应的请求参数

let data = new FormData()
let a =$('input')[0].files[0]
data.append('user',a)
axios.post(`${url}`,data).then(res=>{})
axios({
  method: 'post',
  url,
  data:formData
}).then(res=>{})

image.png
image.png

3.application/x-www-form-urlencoded

image.png

对应的请求参数

let data = {company_license_number: "凄凄切切群群群群群群群群群群群"
  company_name: "去",
  province_id: 110000}
import qs from 'Qs'
axios.post(`${url}`,qs.stringify(data)).then(res=>{})
axios({
  method: 'post',
  url,
  data:qs.stringify(data)
}).then(res=>{})
})

image.png
image.png

从上面的请求可以可以发现一个不同之处：post请求都会有content-type，而get请求是没有的

为什么呢？
在http的请求中主要包含三个部分，请求行、请求头、消息主体。post提交的数据必须要放在消息主体中
，所以需要指定content-type

content-type，指代网页中存在的内容类型，用于定义网络文件的类型和编码。

那么get请求和post请求的区别是什么呢？
get请求：
会被缓存、长度有限制、一般是获取数据
post请求：
不会缓存、没有长度显示、一般是为了提交表单数据。