前端菜鸟实录之网络请求模块

总结一下自己对网络请求粗浅的认识

网络请求中三种传参方式

1. params传参：传递的参数最终会以键值对的方式拼接在url上。

如:

params：{

        id:1,

        name:'小明'   

}

则url地址为xx/xx？id=1&name=小明

        params适用于get请求和post请求，get请求只能用params，而post请求使用params只能传递简单数据类型，对于复杂的数据用data更好。

     2.data传参：传参放在请求体中，适用于post请求。

        协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。

        所以当post请求且为data传参时，我们可以自定义消息格式。通过在axios配置header：{'Content-Type':xx}规定消息格式。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。 

content-type的三种常见数据格式：

• Content-Type: application/json

则data属性值为普通对象就可以了（因为浏览器会自动把js对象转化成json对象）

如data：{id:1,name:“小明"}

这种格式也是axios请求默认格式

• Content-Type: multipart/form-data

那么data属性值需要是formData格式，参数需要做如下实例处理

let params = new FormData()
params.append('file', this.file)
params.append('qq', this.qq)
params.append('weChat', this.WeChat)
axios({
   url,
   method:'post',
   {headers: {'Content-Type': 'multipart/form-data'}},
    data:params
})

• application/x-www-form-urlencoded

处理如下

import Qs from 'qs'
let params= {
    "name": "ll",
    "age": "18"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: url,
    data: Qs.stringify(params) //输出 "name=11&age=18"
})

qs 这个库是 axios 里面包含的，不需要再下载了

如果是post加data，需要和后端沟通Content-Type值

3.restful风格传参，参数拼接在url中，以//隔开

如：url：xx/xx/1/小明

可以通过+拼接地址，'xx/xx/'+param.age+'/'+param.name

或者`${}`方式拼接地址，`xx/xx/${param.age}/${param.name}`

如果有非必传字段会出现，//情况

要不要自己手动配置content-type？不需要

无论是对象，formdata，键值对，还是纯文本，浏览器都会根据传参的数据类型，自动填写content-type。

那么如果是自己配置content-type，注意如下坑

！不要自己配置content-type：multipart/formData，因为除了数据格式，还需要配置参数之间的分隔符boundary=---WebKitFormDataBoundaryxxxx。

容易出错，不如让浏览器自己填

！如果传参格式是JSON.stringfy(对象)，浏览器识别为字符串，即content-type：plain/text