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
});

 

分类: axios