首页 > 移动平台 > 详细

axios的各种post提交方式总结

时间:2021-02-23 11:09:07      阅读:25      评论:0      收藏:0      [点我收藏+]

先创建一个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
});
 
分类: axios

axios的各种post提交方式总结

原文:https://www.cnblogs.com/chinasoft/p/14434101.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!