uni-app请求后台接收不到参数

uni-app请求后台接收不到参数

1.问题描述

在uni-app中发起请求的代码如下:

uni.request({
			url: "http://localhost:8080/user/register",
			method: "POST",
			data: {
				"userName": res.userName,
				"passWord": res.passWord
			},
			success: (data) => {
				console.log("服务器成功返回：", data);
			},
			fail: (data) => {
				console.log("服务器失败返回：", data);
			},
			complete: () => {
				console.log("请求完成")
			}
		})

后端java Controller的代码如下:

@PostMapping("/register")
public CommResponse register(User user) {
    // 注册
    CommResponse commResp = userService.register(user);
    return commResp;
}

请求的userName,passWord在后端的user 对象无法自动注入,导致参数取不到,直接报了空指针

2.排查原因

经过排查uni.request的api文档,有段关于data的说明如下:
data最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：
对于 GET 方法，会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会进行 JSON 序列化。
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

在浏览器debug发现,请求头中是默认Content-Type: application/json;而我们后端代码当前是使用默认form表单提交形式,所以无法正常接收参数.

3.解决办法

1. 修改前端请求头content-type值为application/x-www-form-urlencoded;charset=utf-8:

uni.request({
   			url: "http://localhost:8080/user/register",
   			method: "POST",
   			header: {
   				'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
   			},
   			data: {
   				"userName": res.userName,
   				"passWord": res.passWord
   			},
   			success: (data) => {
   				console.log("服务器成功返回：", data);
   			},
   			fail: (data) => {
   				console.log("服务器失败返回：", data);
   			},
   			complete: () => {
   				console.log("请求完成")
   			}
   		})

2. 修改后端controller参数接收方式

// 这里是加上@RequestBody注解,使其包装为对象, 也可以用Map对象去接,再取出
@PostMapping("/register")
public CommResponse register(@RequestBody User user) {
    CommResponse commResp = userService.register(user);
    return commResp;
}

如上两种方式根据自身取其一即可,参数接收不到的问题即可解决