有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也是前端设置的,主要还是看后端需要什么样格式的数据