axios 用 params/data 发送参数给 springboot controller，如何才能正确获取

今天有人遇到接口调用不通的状况，粗略看了一下是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 程序

一、在前端使用 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);

二、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与不加注解获取参数的区别

一、@RequsetParam 获取 k=v 格式的参数，get/post均可以

二、@RequestBody 获取payload中的数据，对于前端传递的 json 对象在 springboot web中反序列化尤其方便，同时它还支持获取二进制字节数据等。

三、在不适用注解获取参数时，默认@RequsetParam机制，而且要求前端传递的参数名称与 springboot web 在的参数名称一致，不然没法获取到数据。

最后在说明一点，用于反序列化的 Java 类，最好不要使用 java基本数据类型，尽可能使用 基本类型的包装类型，如上面LoginModel中的 Integer，这样就能够在前端不传对应参数时保持为null👌