有3个关键点 1、content-type类型 2、get OR post 3、数据格式配置content-typeaxios 使用 post 发送数据时,Content-Type 默认为 application/json;charset=utf-8 也就是默认把 json 格式的数据放到请求体中提交。...
有3个关键点
1、content-type类型
2、get OR post
3、数据格式
配置content-type
axios 使用 post 发送数据时,Content-Type 默认为 application/json;charset=utf-8
也就是默认把 json 格式的数据放到请求体中提交。
但是实际接口要求的 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 或者其他类型
所以我们首先要设置header
配置axios请求头中的content-type为指定类型
方法一:
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
方法二:局部的在某个需要配置的接口处配置即可
{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}
不同的content-type 搭配上get 或者post 要提交的数据格式也是不一样的
三种content-type
-
application/x-www-form-urlencode
请求体中的数据会以普通表单形式(键值对)发送到后端,
请求体的数据格式form data
POST请求时将data序列化,需要添加qs.stringify
-
application/json
axios默认的content-type
请求体中的数据格式Payload
请求体中的数据会以json字符串的形式发送到后端,POST请求时data不要序列化
-
multipart/form-data
一般表单上传文件时用这种形式,
只要传表单就好了,不需要使用qs.stringify
qs.stringify
- qs.stringify
Qs.stringify()就是把传入的对象转换为键值对
get请求的参数以键值对的方式跟在url后面的,而post请求的参数是以键值对的方式在请求体里的,Qs.stringify()就是把传入的对象转换为键值对。
具体使用
1、get请求,不用改,默认格式 params:{} 或者直接?id=XXX&pasword=XXXx;
2、content-type:'application/x-www-form-urlencode' post
let data={name:'张三',age:18};
axios.post('url',qs.stringify(data),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})//使用qs.stringify
.then(res=>{
console.log('返回数据:',res)
})
3、content-type:'application/json' post
let data={name:'张三',age:18};
axios.post('url',data)//数据不用改变
.then(res=>{
console.log('返回数据:',res)
})
4、content-type:'multipart/form-data' post
let data=new FormData();
data.append('name','张三');
data.append('age',18);
axios.post('url',data,{headers:{'Content-Type':'multipart/form-data'}})
.then(res=>{
console.log('返回数据:',res)
})
content-type是前端设置的,qs.stringify也是前端设置的,主要还是看后端需要什么样格式的数据
本文标题为:对axios和content-type和post&get传参格式的记录
基础教程推荐
- iOS中如何判断当前网络环境是2G/3G/4G/5G/WiFi 2023-06-18
- Android开发Compose集成高德地图实例 2023-06-15
- iOS开发 全机型适配解决方法 2023-01-14
- Android Compose自定义TextField实现自定义的输入框 2023-05-13
- Android实现短信验证码输入框 2023-04-29
- IOS获取系统相册中照片的示例代码 2023-01-03
- iOS Crash常规跟踪方法及Bugly集成运用详细介绍 2023-01-18
- Flutter进阶之实现动画效果(三) 2022-10-28
- iOS开发使用XML解析网络数据 2022-11-12
- MVVMLight项目Model View结构及全局视图模型注入器 2023-05-07