axios利用params/data发送参数给springboot controlle的正确获取方式
时间：2022-09-04 11:12:07 | 栏目：JavaScript代码 | 点击：次
引言
今天有人遇到接口调用不通的情况，粗略看了一下是axios跨域请求引起了。找到问题，处理就简单多了。
但是我看其代码，发现比较有意思
export function agentlist(query) {
return request({
url: /agent/list',
method: 'get',
params: query
})
}
export function editagent(data) {
return request({
url: '/agent/editagent',
method: 'post',
data:data
})
}
export function deleteagent(id) {
return request({
url: '/agent/delete',
method: 'post',
params:{id}
})
}
上面的代码中的request是axios实例，同是post却出现了data或params做数载体的情况。凭直觉该代码会在后续请求中出现问题，果不其然后续出现各种问题。
出现的问题主要是：前端传递参数给了springboot程序，但是程序中却接收不到数据或只接收到部分数据。出现问题前后端代码如下：
前端：
export function login(account, password, orgType) {
return request({
url: '/webapi/login',
method: 'post',
data: {"loginId":account,"password":password,"orgType":orgType}
)}
后端：
@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}
程序运行异常：
java.lang.IllegalStateException: Optional int parameter 'orgType' is present but cannot be translated into a null value due to being declared as a primitive type. Consider declaring it as object wrapper for the corresponding primitive type.
问题分析：
出现异常的原因看似orgType无法转换为对象类型引发的，真实情况并非如此。真正的原因是Java中的代码根本就无法获取到3个参数，前两个是String类型在无法获取参数的情况下会被赋值为null，第三个参数因是 int 类型，因无法赋值为null，故引发该异常。出现异常并非Java代码写得不好，而是前后台传参衔接出了问题。
前端数据发送网络请求，注意下面的数据的格式：
前端数据确实发送了，但是数据的格式为json格式。
服务器端POST请求获取参数，要求的参数格式为：key=value&key2=value2&key.....，因此服务器端无法获取数据也就好理解了。
解决上述解决方案：
前端解决方案1
export function login(account, password, orgType) {return request({
url: '/webapi/login',
method: 'post',
data: "loginId="+account+ "&password="+password+"&orgType="+orgType
})
}
手动构造服务器端需要的数据格式，此时再次执行客户端程序，并跟踪网络请求如下图，springboot程序正常获取到数据。
上面这种方案虽能解决问题，但太机械，用来分析问题可以，生产中就行不通了。
前端方案2
export function login(account, password, orgType) {
return request({
url: '/webapi/login',
method: 'post',
params: {"loginId":account, "password":password,"orgType":orgType}
})
}
将 axios 中的参数载体由 data 改为 params，此时再次执行客户端程序，并跟踪网络请求如下图，springboot程序正常获取到数据。
上面这种解决方案，将要发送的数据对象以params做载体发送时，axios会把数据对象的属性与值拼成 k=v&k=v 格式，但这些数据是作为 Query String（放在url中的参数） 传递给后台程序的，因此并非真正意义上post传参（实际是post方式向增加了参数url地址，提交空数据?）。
总结：通过上面的两个前端解决方案，现在就很容易搞清楚 axios 中的 params与data 传参的区别了。
params 传参，参数以 k=v&k=v 格式放置在 url 中传递。
data传参，参数会收到Request Header中的 Content-Type 类型的影响，但它们肯定不会出现在url中，我们就暂且任务 data 的参数会在 form表单中吧。
前端解决方案3
使用 qs 来实现 json 对象的 k=v 格式化
import qs form 'qs'
export function login(account, password, orgType) {
return request({
url: '/webapi/login',
method: 'post',
data: qs.stringify({"loginId":account, "password":password,"orgType":orgType})
})
}
如此一来，就非常方便的将json对象序列化为url格式，json对象属性再多也不再是负担。
现在 json 当红，js模块化.....超速发展，我们的项目中再传一个两个的参数太low，现在流行传对象。要前端传递对象到后端 springboot web 程序，现在这都是事儿。
前端传递json对象到springboot web 程序
1、在前端使用 data 作为载体传递 json 对象
var jsonObject = {"loginId":account, "password":password,"orgType":orgType};
export function login(obj) {
return request({
url: '/webapi/login',
method: 'post',
data: obj
})
}
login(jsonObject);
2、Springboot后端
class LoginModel{
String loginId,passowrd;
public String getLoginId() {
return loginId;
}
public void setLoginId(String loginId) {
this.loginId = loginId;
}
public String getPassowrd() {
return passowrd;
}
public void setPassowrd(String passowrd) {
this.passowrd = passowrd;
}
public Integer getOrgType() {
return orgType;
}
public void setOrgType(Integer orgType) {
this.orgType = orgType;
}
Integer orgType;
}
@PostMapping(value = "/login")
public Result login(@RequestBody LoginModel model, HttpServletResponse response){}
springboot web端，通过@RequestBody注解将自动收集请求的 payload 中的数据，并将数据反序列化为 LoginModel对象。
简单总结一下 springboot中关于 @RequsetParam、@RequestBody与不加注解获取参数的区别
1、@RequsetParam 获取 k=v 格式的参数，get/post都可以
2、@RequestBody 获取payload中的数据，对于前端传递的 json 对象在 springboot web中反序列化尤为方便，同时它还支持获取二进制字节数据等。
3、在不适用注解获取参数时，默认@RequsetParam机制，并且要求前端传递的参数名称与springboot web 在的参数名称一致，否则无法获取到数据。
最后在说明一点，用于反序列化的 Java 类，最好不要使用 java基本数据类型，尽量使用 基本类型的包装类型，如上面LoginModel中的 Integer，这样就可以在前端不传对应参数时保持为null?