axios用params/data发送参数
DW039 人气:0引言
今天有人遇到接口调用不通的情况，粗略看了一下是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地址，提交空数据
加载全部内容