axios的各种post提交方式总结
先创建一个axios的通用对象
const request = axios.create({
timeout: 10000
});
第一种提交form表单数据,后台正常用对象接收
let fm = new FormData();
fm.append("id",1);
fm.append("name","测试");
//提交数据
request({
url:'/api/xxx',
method:'post',
data:fm//注意这里要使用data,如果需要在url上面拼接参数则需要使用param
});
第二种向restful接口提交数据,后台使用@RequestBody接收参数
let person = {
id:1,
name:'张三'
};
request({
url:'/api/yyy',
method:'post',
data:person//注意这里不需要转成json字符串,axios会自动识别该数据是form表单数据还是对象数据
});
第三种向普通接口发送js对象数据,前台需要转换一下,这些数据会当作表单数据提交(类似于第一种,但是这里不传formdata对象)
此种情况需要引入一个qs包用于拼接数据
import qs from 'qs';//如果没有安装qs包请使用 `npm install qs -D`进行安装
let person = {
id:1,
name:'张三'
};
request({
url:'/api/yyy',
method:'post',
data:qs.stringify(person)//注意这里不能使用JSON.stringify,因为会将js对象转换成了json字符串。而qs.stringify类似于参数拼接a=xxx&b=xxx
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· 回顾我的软件开发经历(1)
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· .NET 9 new features-C#13新的锁类型和语义
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会