axios 发送数据请求的方式 - vue3 项目实战
axios 发送数据请求的方式
数据传送:类型与编码
Content-Type
Content-Type
编码类型,是指http、https发送信息至服务器时的内容编码类型,用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。常用的Content-Type有如下:
text/html
,text/plain
,text/css
,text/javascript
,image/jpeg
,image/png
,image/gif
等常见的页面资源类型。application/x-www-form-urlencoded
,multipart/form-data
,application/json
,application/xml
,这四个是表单提交或上传文件的常用的资源类型。
axios 请求
method | Content-Type | 编码方式 |
---|---|---|
post | application/x-www-form-urlencoded | formdata |
post | multipart/form-data | formdata |
post | application/json | request payload |
get | application/json | Query String Parameters |
Query String Parameters
当发起一次get
请求时,参数会以url string 形式进行传递。即?后的字符串则为其请求参数,并以&作为分隔符。
axios.get('https://api.example.com/topiclist?cid=2');
Request Payload
Request Payload更准确的说是http request的payload body,对应请求体。一般用在数据通过POST
请求或者PUT
请求。
axios 默认Content-Type
:application/json,以json形式将数据发送给服务器。
let data = {"name": "123", "val": "456"}; axios.post('https://api.example.com/topic/save', data)contentType:"application/json",是一种文本类型,表示json 格式的文本。在数据传输过程中,json 数据是以文本的形式传递。
json 格式:{"key":"value"},键值对并且带有双引号。
Form Data
编码方式Form Data,特点是:对于表单字段以name/value值对形式传递,对于上传文件,以二进制编码方式传送。
var formData = new FormData(); formData.append("email","56789@qq.com"); formData.append("password",123456); axios.post('https://api.example.com/login', formData)
axios 请求数据的方式
axios 默认设置:
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
- 当每个具体的向后端服务器发送的请求,非post请求的时候,比如:get、put、delete、patch等请求,若没有特别设置
Content-Type
的时候,其类型为application/json。若单独设置的时候,以最后的具体设置为准。 - 当每个具体的向后端服务器发送的请求,是post请求的时候,若没有特别设置
Content-Type
的时候,其类型为application/x-www-form-urlencoded。若单独设置的时候,以最后的具体设置为准。 - 在 axios 封装的时候,没有设置此类型,那么默认也是此类型。所以在封装的时候,可以不写以上设置,因为它是默认的设置。
在实际开发过程中,根据开发多用的类型来设置。比如,在 axios 封装的时候,跟后端开发的程序员,约定绝大多数情况下使用的JSON数据,那么设定:
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';前后端分离模式下的开发,多用携带token数据保证数据交互安全。也有携带cookie数据的,在跨域资源共享下(CORS模式),这些携带身份验证的方式,都会触发【预检请求】options请求。另外,当Content-Type:application/json;(以 json 数据交互),也会触发【预检请求】options请求。所以,在跨域资源共享下(CORS模式),可以设置Access-Control-Max-Age请求缓存来减少【预检请求】。
get 请求
对于 axios 的请求方式get
,Content-Type:application/json,编码方式:Query String Parameters,是通过 url 方式来传参数。例如:https://api.example.com/novellist?cid=1。即?后的字符串则为其请求参数,并以&作为分隔符。
import axios from 'axios'; axios.get('https://api.example.com/novellist?cid=1'); //或者 axios({ method:'get', url:'https://api.example.com/novellist?cid=1', })
params选项,来传递参数,是相同的效果:
import axios from 'axios'; axios({ method:'get', url:'https://api.example.com/novellist', params:{ cid:1 } })
paramsSerializer选项,是对params选项进行序列化:
import axios from 'axios'; import Qs from 'qs'; axios({ method:'get', url:'https://api.example.com/novellist', params:{ cid:1 }, paramsSerializer:function (params) { return Qs.stringify(params) }, })
以上几种方式,都是相同的请求 url 网址:https://api.example.com/novellist?cid=1
post 请求
axios 在 post 请求方式下,有点复杂,比 get 方式复杂一点。需要注意两个方面:
- HTTP 请求中 header 头部中,
Content-Type
设定。 - 请求中,所发送的数据格式,axios 设置中,有两个选项
data
选项,transformRequest
选项。
方式一:普通表单之 json 数据
axios 默认设置下,发送 post 请求,提交普通表单。以账号密码登录为例子:
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.post('https://api.example.com/login',{ data:{ email: '567899@qq.com', password: '123456', }, } }) 或者 axios({ method:'post', url:'https://api.example.com/login', data:{ email: '567899@qq.com', password: '123456', } })
Content-Type:application/json;
我们看到Content-Type:application/json;
,而非默认设置的Content-Type: application/x-www-form-urlencoded;
。出现这样的变化,是因为data
选项,保存的是objec对象,发送请求过程会被以、JSON格式发送,既然发送的是JSON数据,那么 axios 会自动使用 HTTP 请求 header 中,Content-Type: application/json;
。
若要保证是普通表单数据,Content-Type:application/x-www-form-urlencoded;
,而非JSON数据,还应该使用transformRequest选项。对于后端这两种不同的数据类型,接收方式不同。
当然以 post 方式来发送JSON表单数据,也是正常的传送方式,也是能被后端处理的。需要与开发后端程序员约定好。个人提倡:前后端都以JSON数据来交互。出于代码洁癖,axios 的 post 默认设置可以修改为(也可以不修改,毕竟 axios 会自动调整):
axios.defaults.headers.post['Content-Type'] = 'application/application/json;charset=UTF-8';
注意事项:
- 提交普通表单的时候,Content-Type是:application/x-www-form-urlencoded;。若表单中含有上传文件的时候,Content-Type应该为:multipart/form-data。
- 配置中的data选项,是objec对象,非 json 数据格式。即使手工改写成 json 数据格式(带双引号的键值对),是多余的行为,axios 在 HTTP 传送过程中,会把它们转化为标准 JSON 数据格式。
标准写法 axios({ method:'post', url:'https://api.example.com/login', data:{ email: '567899@qq.com', password: '123456', } }) 与此相同的效果,JSON 格式数据。没有必要如此,因为 axios 会自动转化。 axios({ method:'post', url:'https://api.example.com/login', data:{ "email": '567899@qq.com', "password": '123456', } })
以标准 json 数据格式,post 数据
若想生成标准的 json 格式数据,需要在transformRequest选项中,格式化数据。
axios.post('https://api.example.com/login',{ data:{ email: '567899@qq.com', password: '123456', }, transformRequest: [ (data) => { return JSON.stringify(data); }, ], } }) 或者 axios({ method:'post', url:'https://api.example.com/login', data:{ email: '567899@qq.com', password: '123456', } transformRequest: [ (data) => { return JSON.stringify(data); }, ], })
方式二:普通表单之 Form Data 数据
transformRequest选项,对data
选项中的对象,进行转化。转化成为Form Data(字段为键值对,例如:email=567899@qq.com&password=123456)数据结构。
import axios from 'axios'; import Qs from 'qs'; axios({ method:'post', url:'https://api.example.com/login', headers:{ "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", }, data:{ email: '567899@qq.com', password: '123456', }, transformRequest: [ (data) => { return Qs.stringify(data); }, ], })
方式三:上传表单之 Form Data 数据
表单数据中,包含有上传图片、上传视频音频等。此类上传表单,只能是Content-Type:multipart/form-data,以Form Data编码方式传送数据。
import axios from 'axios'; let formData = new FormData(); formData.append('file', file); axios.post('https://api.example.com/thumbnail/upload', formData, { headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8', }, }) 或者 axios({ method:'post', url:'https://api.example.com/thumbnail/upload', data:formData, headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8', }, })
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!