axios利用params/data发送参数给springboot controlle的正确获取方式

更新时间：2022年02月11日 10:01:42 作者：DW039

这篇文章主要给大家介绍了关于axios利用params/data发送参数给springboot controlle的正确获取方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

引言

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

总结

到此这篇关于axios利用params/data发送参数给springboot controlle的正确获取方式的文章就介绍到这了,更多相关axios用params/data发送参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

egg.js的基本使用和调用数据库的方法示例
这篇文章主要介绍了egg.js的基本使用和调用数据库的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
理解JavaScript设计模式中的单例模式
这篇文章主要介绍了理解JavaScript设计模式中的单例模式，单例模式即Singleton Pattern是最简单的设计模式之一，下文更多相关介绍感兴趣的小伙伴可以参考一下
2022-04-04
JS实现点击图片放大缩小及拖拽功能
本文使用 vue创建一个可拖拽和缩放的图片查看器组件,该组件不仅可以展示图片,还支持用户通过鼠标拖动和缩放来查看细节,本文将介绍如何封装一个简单的图片拖拽与缩放组件,感兴趣的小伙伴跟着小编一起来看看吧
2025-02-02
js如何将多个json结构组成的字符串转换为数组？
接口返回的EventStream结构的数据,由于http流式传输时,可能会分段,所以导致本该每次返回一段json数据结构的字符串,变成了多个json数据结构的字符串拼接在了一起,本文讲述js如何将多个json结构组成的字符串转换为数组
2024-08-08
Web Uploader文件上传插件使用详解
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。这篇文章主要为大家详细介绍了Web Uploader文件上传插件使用方法，感兴趣的小伙伴们可以参考一下
2016-05-05
使用JavaScript实现LRU缓存的代码详解
LRU（Least Recently Used）算法是一种广泛应用于内存管理和缓存系统的策略,本文将介绍LRU算法的基本原理,并通过JavaScript实现案例,帮助读者理解其在前端开发中的应用场景,需要的朋友可以参考下
2024-05-05
JavaScript中Math对象相关知识全解
Math对象中的方法很常用,来跟我一起看看吧,下面这篇文章主要给大家介绍了关于JavaScript中Math对象相关知识全解的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
JavaScript实现内容滚动与导航标签互动关联方案
这篇文章主要介绍了JavaScript实现内容滚动与导航标签互动关联方案，主要根据滚动左侧内容，关联激活右侧导航节点展开相应介绍，需要的小伙伴可以参考一下
2022-06-06
JavaScript立即执行函数IIFE的用法详解
在JavaScript开发中,立即执行函数（Immediately Invoked Function Expression,简称IIFE）是一种非常实用的设计模式,本文将深入探讨IIFE的基本概念、作用以及实际应用场景,并通过多个示例帮助开发者更好地掌握这一技术,需要的朋友可以参考下
2025-02-02
js推箱子小游戏步骤代码解析
本篇文章通过代码分析给大家讲解了JS制作推箱子小游戏的步骤以及要点，需要的朋友参考学习下吧。
2018-01-01