关于请求方式application/json|x-www-form-urlencoded和multipart/form-data的简单区别

·  阅读 153
关于请求方式application/json|x-www-form-urlencoded和multipart/form-data的简单区别

持续创作,加速成长!这是我参与「掘金日新计划 · 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格式,如下图:

image.png

在请求的载荷中,可以看到JSON格式的参数:

image.png

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'
  }
})
复制代码

在请求载荷中,下面的参数格式是错误的:

image.png

通过qs库序列化后的载荷如下:

axios.post('https://demo', qs.stringify({
  name: 'Diana',
  age: 24
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
复制代码

image.png

注意
如果是中文或特殊字符如"/"、","、“:" 等会自动进行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的格式以替换为:

image.png

关于上面boundary的解释为:
首先生成了一个boundary用于分割不同的字段,在请求实体里每个参数以------boundary开始,然后是附加信息和参数名,然后是空行,最后是参数内容。
多个参数将会有多个boundary块,如果参数是文件会有特别的文件域,最后以------boundary–为结束标识。multipart/form-data支持文件上传的格式,一般需要上传文件的表单则用该类型。

image.png

以上,就是三种请求方式的简单理解了:)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改