持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
相关简介
-
前言 在前端开发中，除了画画页面写写布局以外，其他更多的时间就是与后端对调接口，所以页面请求就是经常打交道的一个地方了，开发中通常都是通过
Axios来使用get或者post方式请求了。
对应get请求参数是直接拼接在url上的，而post请求的话参数就是携带在body里面的，并且有着不同的类型。 -
介绍 在请求的过程中，大部分时间都是关注在接口的请求方式和参数上面，但是还有一个比较重要的地方，就是
Content-Type属性，这个属性表示请求参数以哪种方式传递给后端。
往往后端接受不到参数的其中一个原因可能就是Content-Type设置的不对。
application/json
这是比较常用也是比较简单的一种请求方式，这种请求方式会以JSON格式请求（以“键-值”对的方式组织的数据），然后再请求过程中将参数序列化为JSON字符串，如下：
axios.post('https://demo', {
name: 'Diana',
age: 24
})
图中的请求标头中，其中的Content-Type就自动的切换为了application/json格式，如下图：
在请求的载荷中，可以看到JSON格式的参数：
application/x-www-form-urlencoded
这种格式的话，需要参数以这种形式传递：a=1&b=2&c=3；通过&来分开，在使用Axios请求时需要使用qs库来进行序列化后请求，否则就会出现错误的请求，例如下面：
axios.post('https://demo', {
name: 'Diana',
age: 24
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
在请求载荷中，下面的参数格式是错误的：
通过qs库序列化后的载荷如下：
axios.post('https://demo', qs.stringify({
name: 'Diana',
age: 24
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
注意
如果是中文或特殊字符如"/"、","、“:" 等会自动进行URL转码
multipart/form-data
常用的请求还有这一种，这种请求主要用于上传文件时使用，参数需要通过FormData对象使用append方法的方式包装起来，以下面的代码为例：
<input type="file" @change="onUploadFn" />
onUploadFn(e: any) {
const formData = new FormData()
formData.append('file', e.target.files[0])
formData.append('name', 'demo')
axios.post('https://demo', formData)
}
当点击文件上传之后，可以看到在请求标头中Content-Type的格式以替换为：
关于上面boundary的解释为：
首先生成了一个boundary用于分割不同的字段，在请求实体里每个参数以------boundary开始，然后是附加信息和参数名，然后是空行，最后是参数内容。
多个参数将会有多个boundary块，如果参数是文件会有特别的文件域，最后以------boundary–为结束标识。multipart/form-data支持文件上传的格式，一般需要上传文件的表单则用该类型。
以上，就是三种请求方式的简单理解了:)
