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
});
posted @   xuxianshun  阅读(5429)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· 回顾我的软件开发经历(1)
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· .NET 9 new features-C#13新的锁类型和语义
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
点击右上角即可分享
微信分享提示