美文网首页
浏览器中接口请求方式的思考

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

作者: guoss | 来源:发表于2021-01-06 21:42 被阅读0次

    在浏览器输入一个地址到获取整个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请求:
    不会缓存、没有长度显示、一般是为了提交表单数据。

    相关文章

      网友评论

          本文标题:浏览器中接口请求方式的思考

          本文链接:https://www.haomeiwen.com/subject/vxzwoktx.html