使用axios请求接口,几种content-type的区别详解
axios的使用
安装(一般使用框架的话,脚手架都集成了)
$npminstallaxios
请求示例
//POST
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
//GET
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
//执行多个并发
axios.all([get1(),get2()])
.then(axios.spread(function(acct,perms){
//两个请求现在都执行完成
}));
可以通过向axios传递相关配置来创建请求
语法:axios(config)
axios({
method:'post',
url:'/user/12345',
data:{
firstName:'Fred',
lastName:'Flintstone'
}
});
这里,我就拿以POST的方式传递相关配置来说事,因为笔者在这里躺了两次坑,很有必要记录一下,哈哈.
默认情况下,不写content-type,是以json的方式来传递,(Content-Type:application/json;charset=UTF-8)
axios({
url:'/api/connect/token',
method:'post',
data:{
firstName:'Fred',
lastName:'Flintstone'
}
}).then(res=>{
console.log(1234,res.data)
}).catch(error=>{
console.log(error)
})
Headers如下:
RequestPayload
{firstName:"Fred",lastName:"Flintstone"}
content-type改成x-www-form-urlencoded,即表单提交方式
axios({
url:'/api/connect/token',
method:'post',
data:{
firstName:'Fred',
lastName:'Flintstone'
},
headers:{
'Content-type':'application/x-www-form-urlencoded'
}
}).then(res=>{
console.log(1234,res.data)
}).catch(error=>{
console.log(error)
})
Headers如下:
FormData
{"firstName":"Fred","lastName":"Flintstone"}:
另一种情况,序列化成字符串形式传递
axios({
url:'/api/connect/token',
method:'post',
data:JSON.stringify({
firstName:'Fred',
lastName:'Flintstone'
})
}).then(res=>{
console.log(1234,res.data)
}).catch(error=>{
console.log(error)
})
结果跟上面一致:
FormData
{"firstName":"Fred","lastName":"Flintstone"}:
还有一种常见情况,通过qs库对数据进行编码(前提要安装qs)
importqsfrom'qs'
axios({
url:'/api/connect/token',
method:'post',
data:qs.stringify({
firstName:'Fred',
lastName:'Flintstone'
})
}).then(res=>{
console.log(1234,res.data)
}).catch(error=>{
console.log(error)
})
结果:
RequestHeaders Content-Type:application/x-www-form-urlencoded
FormData firstName:Fred lastName:Flintstone
使用qs要注意的点:
allowDots(多层对象嵌套,可用.标记)
qs.stringify({
a:{
b:{
c:'d',e:'f'
}
}
},{allowDots:true});
//'a.b.c=d&a.b.e=f'
以上这篇使用axios请求接口,几种content-type的区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。